Heim > Web-Frontend > js-Tutorial > Lernen der Vue-Front-End-Architektur (2)

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

小云云
Freigeben: 2018-02-02 13:56:01
Original
1648 Leute haben es durchsucht

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
Nach dem Login kopieren

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,
    }
};
Nach dem Login kopieren

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"
  ]
}
Nach dem Login kopieren

Kooperieren Sie mit der Webpack-Konfiguration:

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

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"
  ]
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage