Apprentissage de l'architecture frontale Vue (2)

Dans cet article, nous continuerons l'article précédent Apprentissage de l'architecture frontale Vue (1) pour terminer la configuration d'eslint, babel et postcss. J'espère que cela pourra aider tout le monde.

1. Configurer eslint

Nous utilisons la méthode eslint --init pour créer eslintrc.js.
Au fait, nous devons installer eslint globalement : npm i -g eslint.
Après avoir installé l'eslint complet, nous utilisons eslint --init dans le répertoire racine du projet. Je choisis une manière personnalisée de spécifier les règles d'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

Bien sûr, vous pouvez choisir ce que vous voulez comme vous le souhaitez. Par exemple, comment souhaitez-vous configurer ESLint ? Lorsque cette question vous est posée, vous pouvez choisir les règles populaires, telles que celles de Google, les règles standard et autres.

Laissez-moi poster ma 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. Configurer babel

Créez un fichier .babelrc et configurez-le directement :

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

Coopérer avec la configuration du webpack :

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

Nous utilisons babel-preset-env Nous savons que babel ne traduit que la syntaxe de haut niveau, telle que lambda, class, async, etc., et ne prend pas en charge les versions avancées. API. , j'ai donc besoin de l'aide de babel-polyfill. Ce qui est pratique, c'est qu'il nous suffit de "useBuiltIns": true, puis npm installer babel-polyfill, puis d'ajouter babel-polyfill à l'entrée dans la configuration du webpack.

Avantages de babel-preset-env :

1. Il suffit de décider quelles versions de syntaxe sont prises en charge via targets Il n'y aura pas de traduction transitionnelle et cela. est contrôlable. Une forte flexibilité

2. prend en charge le chargement à la demande de babel-polyfill via useBuiltIns au lieu de taper l'intégralité du package en une seule fois, car en fait nous n'utilisons qu'une petite partie de il

transform-object-rest-spread doit prendre en charge la syntaxe const a = {name: kitty, age: 7}; const b = { ...a } es7.

syntax-dynamic-import doit prendre en charge la syntaxe const Home = () => import('../views/home') pour atteindre l'objectif de fractionnement et de chargement à la demande.

3. Configurer postcss

Créez le fichier postcss.config.js et configurez-le :

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

Résumé

Cet article n'est pas grand-chose, faites-le trois choses, Eslint, Babel, Postcss.

Recommandations associées :

Apprentissage de l'architecture frontale Vue (1)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!