js给表格字段一个默认值_NPM script字段使用技巧

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

{
  "scripts": {
    "build": "node build.js"
  }
}

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

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

npm run

1. 脚本命令互相配合使用

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

2 . 脚本命令设置环境变量

"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

3.通配符

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

"lint": "jshint *.js"
"lint": "jshint **/*.js"

上面代码中，*表示任意文件名，**表示任意一层子目录。

如果要将通配符传入原始命令，防止被 Shell 转义，要将星号转义。

"test": "tap test/*.js"

4. 执行顺序

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

如果是并行执行（即同时的平行执行），可以使用&符号。

npm run script1.js & npm run script2.js

如果是继发执行（即只有前一个任务成功，才执行下一个任务），可以使用&&符号

npm run script1.js && npm run script2.js

5.npm传入参数

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

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

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

  "scripts": {
    "test": "example=abc node index.js --  --example=123"
  }

在js中用process.argv接收

console.log(process.argv,'argv')

在webpack中的实践

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

还有，默认值，钩子函数，简写形式 等等.......

如果要看更多属性，可以参考阮一峰老师的文章

npm scripts 使用指南​www.ruanyifeng.com

参考文章

npm scripts 脚本基础指南​www.cnblogs.com

从头到脚瞧一瞧process.env.NODE_ENV​www.jianshu.com

利用process.env.NODE_ENV设置不同环境的url​segmentfault.com