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.
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, } };
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:
Es reicht aus, zu entscheiden, welche Syntaxversionen durch targets
unterstützt werden. Es wird keine Übergangsübersetzung geben ist kontrollierbar.
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.
Erstellen Sie die postcss.config.js
-Datei und konfigurieren Sie sie:
module.exports = { plugins: [ require('autoprefixer') ], // 配置autoprefix browsers: [ "> 1%", "last 2 versions", "ie >= 10" ] }
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!