13 个npm 快速开发技巧(推荐)(2)

cross-env是 实现跨平台兼容性的最无缝的方法,但还有其他两个流行的工具,它们可以帮助实现跨平台兼容性:

rimraf 可以安装在全球运行跨平台脚本
ShellJS 是Unix shell命令在Node.js API上的可移植实现。

4. 并行运行脚本

可以使用&&来依次运行两个或多个进程。但是并行运行脚本呢?为此,我们可以从各种npm包中进行选择。concurrent npm-run-all 是最流行的解决方案。

首先通过 npm i -D concurrently 安装开发依赖。然后按照以下格式将其添加到脚本中:

{ "start": "concurrently \"command1 arg\" \"command2 arg\"" }

5. 在不同的目录中运行脚本

有时,在不同的文件夹中拥有一个包含多个package.json文件的应用程序。 从根目录访问这些脚本会很方便,而不是每次要运行脚本时导航到不同的文件夹,有两种方法可以执行此操作。

第一种是手动 cd 并运行对应的命令:

cd folder && npm start && cd ..

但还有一个更优雅的解决方案,即使用--prefix标志指定路径:

npm start --prefix path/to/your/folder

下面是一个工作应用程序中此解决方案的示例,我们希望在前端(在客户机目录中)和后端(在服务器目录中)运行 npm start。

"start": "concurrently \"(npm start --prefix client)\" \"(npm start --prefix server)\"",

6. 延迟运行脚本直到端口准备就绪

通常,在开发全堆栈应用程序期间,咱们可能希望同时启动服务器和客户端。wait-on 节点模块提供了一种方便的方法来确保进程只在某些进程就绪时发生:在我们的例子中,我们有一个特定的端口。

例如,这是我在使用React前端的Electron项目中使用的dev脚本。 同时使用,脚本并行加载表示层和Electron窗口。 但是,使用wait-on,只有在 :3000 启动好,才会打开Electron窗口。

"dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on :3000 && electron .\"",

此外,React默认情况下会打开一个浏览器窗口,但对于 Electron 开发来说,这是不必要的。咱们可以通过传递环境变量BROWSER=none来禁用此行为。

7. 列出并选择可用脚本

列出package.json文件中可用的脚本很简单:只需转到项目的根目录并在终端中输入npm run。

但是有一种更方便的方法可以获得脚本列表,可以立即运行该列表:为此,全局安装 NTL (npm任务列表)模块:

npm i -g ntl

然后在项目文件夹中运行ntl命令,可以获得一个可用脚本列表,并可以选择其中一个运行。

13 个npm 快速开发技巧(推荐)

8. 运行前后脚本

你可能熟悉prebuild和postbuild这样的脚本,它们允许你定义在构建脚本之前或之后运行的代码。但事实上,pre和post可以在任何脚本之前添加,包括自定义脚本。

这不仅使你的代码更干净,而且还允许你单独运行pre和post脚本。

9. 控制应用程序版本

与手动更改应用程序的版本相比,npm 提供了一些有用的快捷方式来完成这一点。 要增加版本,请在运行 npm version加上major,minor或patch`:

// 1.0.0 npm version patch // 1.0.1 npm version minor // 1.1.0 npm version major // 2.0.0

根据更新应用程序的频率,可以通过在每次部署时增加版本号来节省时间,使用以下脚本:

{ "predeploy": "npm version patch" }

10. 从命令行编辑 package.json

package.json是一个常规的json文件,因此可以使用工具库json从命令行进行编辑。 这在修改package.json提供另外一种新的方式,允许w你q创建超出默认值的快捷方式。 全局安装:

npm install -g json

然后,可以使用它来使用-I进行就地编辑。 例如,要添加值为“bar”的新脚本“foo”,这样写:

json -I -f package.json -e 'this.scripts.foo="bar"'

11. 自动设置和打开你的github库

如果package.json文件中有“repository”,则可以通过输入 npm repo在默认浏览器中打开它。

如果你的项目已经连接到远程存储库,并且已经在命令行上安装了git,那您可以使用这个命令找到你的连接存储库

git config --get remote.origin.url

更好的是,如果你按照上面的提示并安装了json模块,可以使用下面的脚本自动将正确的存储库添加到 package.json

json -I -f package.json -e "this.repository=\"$(git config --get remote.origin.url)\""

12. 自定义npm init脚本

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/503e4a7de38623daee8e652a23b79584.html