从零开始做Vue前端架构（2）

前言

这一篇，我们将接着上篇来完成配置eslint、babel、postcss。

开发

一、配置eslint

我们采用eslint --init的方式来创建eslintrc.js。
对了，前提我们需要全局安装eslint：npm i -g eslint。
安装完全局eslint以后，我们在项目根目录使用eslint --init，我选择自定义的方式来规定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

当然，你可以按照自己喜欢，选择自己想要的方式，比如How would you like to configure ESLint? 这个问题的时候，可以选择popular的规则，有Google、standard等规则，选择你想要的就好。

我po下我的配置吧：

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

二、配置babel

创建.babelrc文件，直接上配置：

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

配合webpack配置：

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

我们使用的是babel-preset-env，我们知道，babel只是转译了高级语法，比如lambda，class，async等，并不会支持高级的api，所以需要babel-polyfill的帮忙。方便的是，我们只需要"useBuiltIns": true，然后npm安装babel-polyfill，再在webpack配置中的entry带上babel-polyfill就好了。

babel-preset-env的优点：

通过targets来决定支持到那个哪些版本的语法就够了，不会过渡转译，可控性强
通过useBuiltIns来支持babel-polyfill的按需加载，而不是一口气把整个包打入，因为其实我们只用到了很小一部分

transform-object-rest-spread是为了支持const a = {name: kitty, age: 7}; const b = { ...a }这种es7语法。

syntax-dynamic-import是为了支持const Home = () => import('../views/home')这种语法，达到按需分割、加载的目的。

三、配置postcss

创建postcss.config.js文件，上配置：

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

总结

这篇不多，就做了三件事，eslint、babel、postcss。

下一篇我们将创建项目文件、目录架构 - 从零开始做Vue前端架构（3）

项目完整代码

Vue前端架构-by 子咻