从零开始做Vue前端架构(2)配置eslint、babel、postcss
CodeLittlePrince opened this issue · 0 comments
前言
这一篇,我们将接着上篇来完成配置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')
],
// 配置autoprefix
browsers: [
"> 1%",
"last 2 versions",
"ie >= 10"
]
}
总结
这篇不多,就做了三件事,eslint、babel、postcss。
下一篇我们将创建项目文件、目录架构 - 从零开始做Vue前端架构(3)