Vue front-end architecture learning (2)

In this article, we will continue the previous article Vue front-end architecture learning (1) to complete the configuration of eslint, babel, and postcss. I hope it can help everyone.

1. Configure eslint

We use eslint --init to create eslintrc.js.
By the way, we need to install eslint globally: npm i -g eslint.
After installing the complete eslint, we use eslint --init in the project root directory. I choose a custom way to specify eslint rules:

➜  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

Of course, you can follow your own If you like, choose the method you want, such as How would you like to configure ESLint? When asked this question, you can choose popular rules, such as Google, standard and other rules, just choose what you want.

Let me post my configuration:

// 创建这个文件的话，本王推荐用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. Configure babel

Create the .babelrc file and configure it directly:

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

Cooperate with webpack configuration:

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

We use babel-preset-env. We know that babel only translates advanced syntax, such as lambda, class, async, etc., and does not support advanced api. So I need the help of babel-polyfill. The convenient thing is that we only need "useBuiltIns": true, then npm install babel-polyfill, and then add babel-polyfill to the entry in the webpack configuration.

Advantages ofbabel-preset-env:

1. It is enough to decide which versions of syntax are supported through targets, and there will be no transition. Translation, highly controllable

2. supports on-demand loading of babel-polyfill through useBuiltIns instead of typing the entire package in one go, because in fact we only A small part of

transform-object-rest-spread is used to support const a = {name: kitty, age: 7}; const b = { ... a }This es7 syntax.

syntax-dynamic-import is to support const Home = () => import('../views/home')This syntax can be split and loaded on demand Purpose.

3. Configure postcss

Create the postcss.config.js file and configure it:

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

Summary

This article is not More, it only does three things, eslint, babel, and postcss.

Related recommendations:

Vue front-end architecture learning (1)

The above is the detailed content of Vue front-end architecture learning (2). For more information, please follow other related articles on the PHP Chinese website!