使用webpack+npm多元化命令

  最近一段时间在使用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多元化命令,我们就可以继续快乐地码代码了~

你可能感兴趣的:(开发日志)