最近一段时间在使用es6+vue+webpack进行开发，之所以选择es6，是因为其本身就包含了模块管理的机制，利用import关键字，基本上就无须再使用requirejs或seajs了。另外es6在es5的基础上，又增加了许多优秀的特性，例如const，let变量声明方式，解决了讨厌的变量提升的问题，=>箭头函数又使得我们的回调看起来更为简洁，等等。
至于vue，简而言之就是一种mvvm框架，可以进行数据的双向绑定，组件的模块化，其vue-router插件可以进行前端路由的控制，应该是继angular之后又一优秀的mvvm框架。
webpack是一种基于流式的构建工具。我们知道，目前大多数浏览器对es6的支持都还不够，因而我们需要使用一种编译工具，例如babel将我们的es6代码转译成es5代码，这样我们的js代码就能在目前市面上的所有浏览器下使用了。
这里主要说的是webpack这个工具。我们知道，如果在一个项目目录下执行webpack命令的话（当然首先你得装过nodejs，然后也全局安装了webpack），webpack会自动去找webpack.config.js这个文件，执行一下里面的配置。当然，我们也可以使用webpack --config XXX来指定我们的配置文件。所以，第一次用webpack时，我就想对于生产环境和开发环境，我只需要写两份配置文件就好了。如果是开发环境，执行一下webpack --config webpack.config.build.js，如果是生产环境，执行一下webpack --config webpack.config.dist.js。
这两份配置文件直到我添加新的项目依赖之前，都工作得很好。当我发现，在加入新的项目依赖后，我首先需要去改开发环境的配置文件，接着还得再去改生产环境的配置文件，这令我十分不爽。webpack能否像gulp一样接受参数，然后按传参，执行不同的流程呢？很不幸，我没有找到这种方法。但是npm却原生支持了传参，因而，我们可以利用这npm run XXX来执行我们定义好的命令。
很简单，在package.json文件中，我们在“script”后添加一些命令：
... "script": { "build": "webpack --progress --colors --watch", "dist": "NODE_ENV=production webpack --progress --colors" } ...
这样，我们将配置信息统一写到webpack.config.js里，在该文件中，我们利用一个函数判断当前是否为生产环境即可：
var isProduction = function() { return process.env.NODE_ENV === 'production'; };
对于生产环境或是开发环境，当我们需要进行区别对待时，就调用一次这个方法，从而使我们能够在一份配置文件中处理不同环境的逻辑。
对于开发环境，执行命令：
npm run build
对于生产环境，执行命令：
npm run dist
然而，这里还有个小插曲，如果你使用的是windows操作系统，你会发现生产环境的命令并不好使。这里直接给一种解决方案，在package.json中再增加一个命令：
... "script": { ..., "dist_win": "set NODE_ENV=production&&webpack --progress --colors" }, ...
windows生产环境下，执行命令：
npm run dist_win
切记，"&&"前后一定不要有多余空格，否则windows很可能会截断命令。
工欲善其事，必先利其器。搞定webpack+npm多元化命令，我们就可以继续快乐地码代码了~
网友评论