• 0

  • 459

  • 收藏

NPM Script字段使用技巧

None

关注Linux

4个月前

npm 允许在package.json文件里面,使用scripts字段定义脚本命令,各个脚本可以互相组合使用,这些脚本可以覆盖整个项目的生命周期

{
  "scripts": {
    "build": "node build.js"
  }
}
复制代码

命令行下使用npm run build 命令,就可以执行这段脚本(执行node下面的build.js文件)

查看当前项目的所有 npm 脚本命令,可以使用不带任何参数的npm run命令 npm run

脚本命令互相配合使用

"scripts": {
    "dev": "cross-env NODE_ENV=abc node src/abc.js",
    "start": "npm run dev "
 }
复制代码

脚本命令设置环境变量

"scripts": {
    "dev": "cross-env NODE_ENV=abc node src/abc.js"
 }
复制代码

npm run dev 会去执行node服务 src目录下的abc.js文件,并可以在node环境中通过process.env.NODE_ENV 获取到abc ,注意在window环境中获取不到process.env.NODE_ENV。

如果你是用webpack项目 可以通过DefinePlugin插件在window环境中获取到process.env.NODE_ENV环境变量

DefinePlugin可以定义一些全局变量,让我们在模块当中直接使用,不用做任何声明

const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/app'
    },
    output: {
        path: 'dist',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
    ]
};
复制代码

如果不用DefinePlugin可以把环境变量放到原型上

import config from '.src/abs'

Vue.prototype.GLOBAL = config

如果没有用cross-env时

在linux或mac中这样定义脚本

NODE_ENV=production node src/abc.js

window

set NODE_ENV=production node build.js 但是不同电脑上不同的设置肯定是不行的呀,这个时候cross-env赶来救场了。 cross-env可以跨平台的设置和使用环境变量 安装:npm install --save-dev cross-env 设置脚本命令

"scripts": {
    "dev": "cross-env NODE_ENV=abc node src/abc.js"
 }
复制代码

这样在运行脚本时不同环境加载不同的配置了

避坑:

我用webpack-dev-server@^2.9.1起本地服务时,会遇到自己在脚本中设置的环境变量会被webpack-dev-server服务重写掉,process.env.NODE_ENV=undefind 这个问题解决的办法(并未在项目中使用) 在abs中重新定义 process.env.NODE_ENV = '"abc"' 脚本命令

"scripts": {
    "dev": "cross-env NODE_ENV=abc node src/abc.js & webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 },
abs.js
process.env.NODE_ENV = '"abc"';
module.exports = {
    NODE_ENV: process.env.NODE_ENV
}
复制代码

然后在配置文件中引入,就不会被服务覆盖掉了。 注意!!!

如果你是vue-cli2 环境配置时这两个文件都需要有改动 dev.env.js // 项目开发环境配置 prod.env.js // 项目生产环境配置

在我自己的项目中如果想定义第三个环境变量可以这样做 复制出来一份webpack.dev.conf.js 命名为webpack.test.conf.js 复制出来一份 test.env.js 命名为 test.env.js 引用改一下

在package.json中定义命令

 "test": "webpack-dev-server --inline --progress --config build/webpack.test.conf.js"
复制代码

还可以通过传入参数来定义环境变量

如何获取npm script的自定义参数 segmentfault.com

通配符

由于 npm 脚本就是 Shell 脚本,因为可以使用 Shell 通配符。

"lint": "jshint *.js"
"lint": "jshint **/*.js"
复制代码

上面代码中,*表示任意文件名,**表示任意一层子目录。 如果要将通配符传入原始命令,防止被 Shell 转义,要将星号转义。

"test": "tap test/\*.js"
复制代码

执行顺序

如果 npm 脚本里面需要执行多个任务,那么需要明确它们的执行顺序。

如果是并行执行(即同时的平行执行),可以使用&符号。

npm run script1.js & npm run script2.js

如果是继发执行(即只有前一个任务成功,才执行下一个任务),可以使用&&符号 npm run script1.js && npm run script2.js

npm传入参数

向 npm 脚本传入参数,要使用--标明。

方法一 可以在命令行中手动输入

方法二 写在script中 多个参数用空格分开

  "scripts": {
    "test": "example=abc node index.js --  --example=123"
  }
复制代码

在js中用process.argv接收

console.log(process.argv,'argv')
复制代码

在webpack中的实践 segmentfault.com/q/101000001…

还有,默认值,钩子函数,简写形式 等等....... 如果要看更多属性,可以参考阮一峰老师的文章。

免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

Linux中文社区

459

相关文章推荐

未登录头像

暂无评论