Webpack初学者-使用webpack与babel（二）-- Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训

教程完了？

老实说，我以为这个教程会更长，但看起来我忘了“加入 babel”这件事实际上非常简单。现在我们可以使用 ES6 语法来更新先前 index.js 的代码了：

// index.js// 接受 hot module reloading
if (module.hot) { 
 module.hot.accept()
}
require('./styles.css') // 網頁現在有了樣式
const Please = require('pleasejs')
const div = document.getElementById('color')
const button = document.getElementById('button')
const changeColor = () => div.style.backgroundColor = Please.make_color()
button.addEventListener('click', changeColor)

Require ES6 的 Module

另一件事情，注意到我们現在可以使用 ES6 的 module 系統。例如：

const Please = require('pleasejs')

我们可以修改成

import Please from 'pleasejs'

额外收获

既然前面没花太多时间，我将再讨论两个很重要且有用的主题。

在 Webpack 和 Babel 设定 production 环境变量

Webpack

如果我们不想要在 production 执行部分的代码，我们可以使用方便的 DefinePlugin。

这个 plugin 让我们可以为我们整个 bundle 建立全域的常数，我们可以命名任何常数，像是：DONT_USE_IN_PRODUCTION: true，但是大多普遍的方式会是 process.env.NODE_ENV: JSON.stringify('production')，这会是更好的选择。这是因为许多项目可以识别并根据 process.env.NODE_ENV 来使用额外的功能和优化你的代码。

为什么要 JSON.stringify？因为根据文件的解释：

如果值是一个字串，它会被作为一个代码片段。

这意思说一个 'production' 只会是一个错误。如果你认为 JSON.stringify 很奇怪，一个有效替代方式是 '"production"'。

你的 plugin 阵列现在看起来应该像：

plugins: [  new webpack.optimize.UglifyJsPlugin({
    compressor: {
      warnings: false,
    },
  }),  new webpack.optimize.OccurrenceOrderPlugin(),  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),  new webpack.DefinePlugin({    'process.env.NODE_ENV': JSON.stringify('production')
  })
]

现在，假如我们不想要在 production 上执行一些代码，我们可以放入一个 if 条件式：

if (process.env.NODE_ENV !== 'production') {  // not for production}

在我们目前的文档中，如果在 production 环境下，我们可以排除 hot reload：

// 在開發環境下接受 hot module reloading
if (process.env.NODE_ENV !== 'production') { 
 if (module.hot) {  
   module.hot.accept()
  }
}

Babel

将我们的 production 变量定义为 process.env.NODE_ENV 有其他额外的好处。

根据手册

“目前环境”是使用 process.env.BABEL_ENV。当找不到 BABEL_ENV 时，它会退回去找 NODE_ENV，如果也找不到 NODE_ENV，目前环境将设为默认值 "development"。

这个意思说 babel 环境会 match 到我们的 webpack 环境。

我们可以利用这一点，只要透过在我们的 .babelrc 加入 env 设定，就可以使用开发环境：

{ 
 "presets": ["es2015", "stage-2"], 
  "env": {  
    // 只發生在 NODE_ENV 沒有被定義或是被設定為 'development'
    "development": {   
       // 當 NODE_ENV 是 production 忽略！
  }
}

当我们介绍 React Transform HMR，我们将使用这个在 part 3 和 react。

加入 Lint

如果你看过任何关于 Webpack/React 专案的 seed/starter，你可能看过一个文件叫做 .eslintrc。如果你不是使用 IDE，而是使用像是 Atom、Sublime、Ecmas、Vim 等等，eslint 提供语法和风格的检查，指出你的错误。此外，即使你正在使用 IDE，它可以提供更多功能，并确保整个专案程式码风格统一。

请注意，如果你相要在编辑器内使用它，你需要安装一个套件，例如我使用 Atom linter-eslint。

如果要减少我们手动配置，我们可以充分的利用继承，使用他人的配置文件。我喜欢使用基于 airbnb 的风格指南配置文件。

开始之前，我们须安装 eslint 和 airbnb 的配置文件：

npm install -g eslint
npm install --save-dev eslint eslint-config-airbnb

我们的设置文件看起来像

// .eslintrc{
"extends": "airbnb/base" //使用 'airbnb/base' ，因為 'airbnb' 是假設使用 react
}

然而，因为 linting 是非常固执的，我喜欢将它调整一些。如果你想要知道这些规则的含意，或是根据你的喜好调整他们，可以查看这里：

// .eslintrc{
"extends": "airbnb/base",
  "rules": {
    "comma-dangle": 0,
    "no-console": 0,
    "semi": [2, "never"],
    "func-names": 0,
    "space-before-function-paren": 0,
    "no-multi-spaces": 0
  }
}

另外，eslint 内建不支持和分辨 babel 语法，所以我们需要安装两个套件：

npm install --save-dev babel-eslint eslint-plugin-babel

调整我们的配置文件，再一次的加入 babel 指定规则：

// .eslintrc{
"extends": "airbnb/base",
"parser": "babel-eslint",
"rules": {
"comma-dangle": 0,
"no-console": 0,
"semi": [2, "never"],
"func-names": 0,
"space-before-function-paren": 0,
"no-multi-spaces": 0,
"babel/generator-star-spacing": 1,
"babel/new-cap": 1,
"babel/object-shorthand": 1,
  "babel/arrow-parens": 1,
  "babel/no-await-in-loop": 1
  },  "plugins": [
    "babel"
  ]
}

最后，在我们的 package.json 文件中的 scripts 加入 lint 会是个好主意。

// package.json
"scripts": {
"build": "webpack --config webpack.config.prod.js",
"dev": "webpack-dev-server --config webpack.config.dev.js",
"lint": "eslint src"
}

当你执行 npm run lint 来确保你的代码没有违反你指定的规则。

结论

我已经把所有这一切的最终结果放入到范例一。

所以现在我们可以轻松的编写 ES6 程式码，此外，也让我们了解到如何编写设定档

然而，你有能力从头开始编写它，并不表示你一定要这么做。为了方便，我有建立一个 repository 让你 clone 下来开始，这是根据这份教学建立的基本文件。

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » Webpack初学者-使用webpack与babel（二）