scripts 带入自定义命令参数

一般情况下,项目中有非常多的地方使用npm scripts配置来跑一些任务,假设有这样一个场景,需要有四个环境, 分别要编译出每个环境对应的包,也许你会想: 我每个环境无非接口不一样,资源地址不一样,可以根据每个环境去修改后,再进行打包.

是的, 如果你不熟悉scripts命令,这未尝不是办法, 但是如果你会用scripts命令,将会更加简单, 下面详细说一下scripts

在项目中,package.json中经常看到这样的配置

package.json

"scripts": {
    "dev": "webpack-dev-server --inline --config webpack.dev.js --colors",
    "build": "webpack --config webpack.pro.js --colors"
  }

以上指令中, 在命令行运行:

npm run dev ----> 运行此目录中webpack.dev.js文件
npm run build ----> 执行编译指令,运行此目录中的webpack.pro.js

如果说我想在命令行输入自定义参数,决定去构建某一分支,该怎么做呢?

输入 man npm-config 你会看到这样的结果输出

   npm gets its config settings from the command line, environment variables, npmrc files, and in some cases, the package.json file.

npm 运行时会从四个地方获取配置信息，命令行中的输入，环境变量，npmrc 配置文件以及，某些情况下会从 package.json 中获取。这里的某些情况就是指 package.json 中定义了 config 字段时。

我们将变量放这里面（其实这里面的叫作配置项更确切，而不是变量）

将package.json改成如下

"scripts": {
    "dev": "webpack-dev-server --inline --config webpack.dev.js --colors --env.test=123456",
    "build": "webpack --config webpack.pro.js --colors"
  }

在webpack运行的文件的配置文件中接收自定义参数值

module.exports = (env) => {
    // 打印一下env里面存在什么值
    console.log(env) // {test: '123456'}
    return merge(common(env), {
        mode: 'development',
        output: {
            filename: './js/app.js',
            // chunkFilename: '[name].[chunkhash:22].js',
            publicPath: '/',
            path: path.resolve(__dirname, 'dist')
        },
        devtool: 'inline-source-map',
        devServer: {
            host: ip,
            port: 8082,
            open: true,
            contentBase: path.join(__dirname, "dist"),
            compress: true
        },
        plugins: [
            new HtmlWebpackPlugin({ // Also generate a test.html
                filename: '1508876.html',
                template: './index.html'
            })
        ]
    })
}

这样就能获取到scripts命令里面的参数了,但是怎么在输入命令的时候动态的传入参数呢?

就像这种形式: npm run dev test=123456 我们可以借助环境变量这样做!

"scripts": {
    "dev": "webpack-dev-server --inline --config webpack.dev.js --colors --env.test=$test",
    "build": "webpack --config webpack.pro.js --colors"
  }

注意,window和liunx环境变量参数带入是不一样的 window的写法为:

"scripts": {
    "dev": "webpack-dev-server --inline --config webpack.dev.js --colors --env.test=%test%",
    "build": "webpack --config webpack.pro.js --colors"
  }

然后执行test=123456 npm run dev,打印env,是不是和刚才的一样呢?

如果想兼容liunx和window 可以使用以下写法

"scripts": {
    "dev": "webpack-dev-server --inline --config webpack.dev.js --colors --env.test=$test",
    "dev:win": "webpack-dev-server --inline --config webpack.dev.js --colors --env.test=%test%",
  }

但是这种写法, 自我感觉而言不太好.
自然万事都有解决方案,可以使用cross-var或者cross-env-shell来解决系统之间的差异,具体可自行查找用法,这里就不多说了.如有问题欢迎留言!