從零開始作Vue前端架構（2）

前言

這一篇，咱們將接着上篇來完成配置eslint、babel、postcss。

開發

1、配置eslint

咱們採用eslint --init的方式來建立eslintrc.js。 對了，前提咱們須要全局安裝eslint：npm i -g eslint。 安裝徹底局eslint之後，咱們在項目根目錄使用eslint --init，我選擇自定義的方式來規定eslint規則：

➜  vue-construct git:(master) ✗ eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser, Node
? Do you use CommonJS? Yes
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? No
? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript
複製代碼

固然，你能夠按照本身喜歡，選擇本身想要的方式，好比How would you like to configure ESLint? 這個問題的時候，能夠選擇popular的規則，有Google、standard等規則，選擇你想要的就好。

我po下個人配置吧：

// 建立這個文件的話，本王推薦用eslint --init建立
module.exports = {
    "env": {
        "browser": true,
        "node": true
    },
    // https://stackoverflow.com/questions/38296761/how-to-support-es7-in-eslint
    // 爲了讓eslint支持es7或更高的語法
    "parser": 'babel-eslint',
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "plugins": [
        // https://github.com/BenoitZugmeyer/eslint-plugin-html
        // 支持 *.vue lint
        "html"
    ],
    // https://eslint.org/docs/rules/
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ],
        // https://eslint.org/docs/user-guide/configuring#using-configuration-files
        // "off" or 0 - turn the rule off
        // "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
        // "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'no-console': 0,
    }
};
複製代碼

2、配置babel

建立.babelrc文件，直接上配置：

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "ie >= 10"
          ]
        },
        "modules": false,
        "useBuiltIns": true
      }
    ]
  ],
  "plugins": [
    "transform-object-rest-spread",
    "syntax-dynamic-import"
  ]
}
複製代碼

配合webpack配置：

{
    test: /\.js$/,
    include: [resolve('app')],
    use: [
      'babel-loader',
      'eslint-loader'
    ]
},
複製代碼

咱們使用的是babel-preset-env，咱們知道，babel只是轉譯了高級語法，好比lambda，class，async等，並不會支持高級的api，因此須要babel-polyfill的幫忙。方便的是，咱們只須要"useBuiltIns": true，而後npm安裝babel-polyfill，再在webpack配置中的entry帶上babel-polyfill就行了。

babel-preset-env的優勢：

1. 經過targets來決定支持到那個哪些版本的語法就夠了，不會過渡轉譯，可控性強
2. 經過useBuiltIns來支持babel-polyfill的按需加載，而不是一口氣把整個包打入，由於其實咱們只用到了很小一部分

transform-object-rest-spread是爲了支持const a = {name: kitty, age: 7}; const b = { ...a }這種es7語法。

syntax-dynamic-import是爲了支持const Home = () => import('../views/home')這種語法，達到按需分割、加載的目的。

3、配置postcss

建立postcss.config.js文件，上配置：

module.exports = {
  plugins: [
    require('autoprefixer')
  ],
  // 配置autoprefix
  browsers: [
    "> 1%",
    "last 2 versions",
    "ie >= 10"
  ]
}
複製代碼

總結

這篇很少，就作了三件事，eslint、babel、postcss。

下一篇咱們將建立項目文件、目錄架構 - 從零開始作Vue前端架構（3）

項目完整代碼

Vue前端架構-by 子咻