Lernen der Vue-Front-End-Architektur (2)

In diesem Artikel werden wir den vorherigen Artikel Lernen der Vue-Front-End-Architektur (1) fortsetzen, um die Konfiguration von Eslint, Babel und PostCSS abzuschließen. Ich hoffe, es kann allen helfen.

1. Eslint konfigurieren

Wir verwenden die Methode eslint --init, um eslintrc.js zu erstellen.
Übrigens müssen wir eslint global installieren: npm i -g eslint.
Nach der Installation des vollständigen Eslint verwenden wir eslint --init im Projektstammverzeichnis. Ich wähle eine benutzerdefinierte Methode zum Festlegen von Eslint-Regeln:

➜  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

Natürlich können Sie auswählen, was Sie möchten Zum Beispiel: Wie möchten Sie ESLint konfigurieren? Wenn Sie diese Frage stellen, können Sie gängige Regeln wie Google, Standard und andere Regeln auswählen.

Lassen Sie mich meine Konfiguration veröffentlichen:

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

Erstellen Sie eine .babelrc-Datei und konfigurieren Sie sie direkt:

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

Kooperieren Sie mit der Webpack-Konfiguration:

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

Wir verwenden babel-preset-env. Wir wissen, dass babel nur High-Level-Syntax wie Lambda, Class, Async usw. übersetzt und keine erweiterte Syntax unterstützt APIs, also brauche ich die Hilfe von babel-polyfill. Das Praktische ist, dass wir nur "useBuiltIns": true, dann npm babel-polyfill installieren und dann babel-polyfill zum Eintrag in der Webpack-Konfiguration hinzufügen müssen.

Vorteile von babel-preset-env:

1. Es reicht aus, zu entscheiden, welche Syntaxversionen durch targets unterstützt werden. Es wird keine Übergangsübersetzung geben ist kontrollierbar.

2. unterstützt das bedarfsgesteuerte Laden von babel-polyfill über useBuiltIns, anstatt das gesamte Paket auf einmal einzugeben, da wir tatsächlich nur einen kleinen Teil davon verwenden it

transform-object-rest-spread soll die const a = {name: kitty, age: 7}; const b = { ...a } es7-Syntax unterstützen.

Syntax-Dynamic-Import soll die const Home = () => import('../views/home')-Syntax unterstützen, um den Zweck der Aufteilung und des Ladens bei Bedarf zu erreichen.

3. Postcss konfigurieren

Erstellen Sie die postcss.config.js-Datei und konfigurieren Sie sie:

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

Zusammenfassung

Dieser Artikel ist nicht viel, tun Sie es einfach drei Dinge, eslint, babel, postcss.

Verwandte Empfehlungen:

Lernen der Vue-Front-End-Architektur (1)

Das obige ist der detaillierte Inhalt vonLernen der Vue-Front-End-Architektur (2). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!