webpack + eslint

工欲善其事必先利其器

前面用gulp 和 gulp-jshint 、sublimeText + jshint 检测了代码，但是需要自己编写.jshintrc文件，一直想试一下airbub的编码规范，但是奈何一直没找到sublimeText配置的资料，今天来试一下webpack + eslint的组合使用airbub的编码规范

新建项目

npm init

注意project name不能与需要依赖的包同名，否者安装不上；比如project name为webpack安装webpack时候会提示一下错误

Refusing to install package with name "webpack" under a package
npm ERR! also called "webpack". Did you name your project the same
npm ERR! as the dependency you're installing?

webpack-dev-server搭建本地服务器

npm install webpack-cli -D
npm i webpack-dev-server -D

然后在项目根文件目录下执行命令即可开启服务器

webpack-dev-server

安装webpack

npm install webpack -g
npm i webpack -D

项目文件根目录下新建webpack.config.js，代码如下

module.exports = {
    // __dirname为node的变量，表示当前所在的根目录
    entry: __dirname + '/src/main.js',
    output: {
        path: __dirname + '/dest',
        filename: 'bundle.js'
    }
};

然后在根目录下执行命令webpack就会发现文件已经打包好了，但是会有一个警告

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

根据显示是mode未指定，在执行webpack的时候可以指定mode有webpack --mode development开发模式与webpack --mode production生产模式；区别在于开发模式打包之后的代码不压缩，生产模式打包的代码会被压缩
也可直接在package.json里面指定命令

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "bulid": "webpack --mode production"
  },
...

但是在打包后的代码中，es6的代码并没有转换成es5

image.png

安装babel-loader 与 babel-preset-es2015

webpack中使用bable-loader

npm install babel-loader babel-preset-es2015

然后在webpack.config.js配置module

module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015']
                }
            },
            exclude: /node_modules/
        }]
    }

再次执行npm run dev发现代码已被转换成es5代码

image.png

安装eslint-loader

接着安装eslint代码检查，webpack的插件都是放在module里面的loader模块引入使用的

npm i eslint-loader -D

然后在webpack.config.js中配置

module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'eslint-loader',
                    options: {
                        formatter: require('eslint-friendly-formatter') // 默认的错误提示方式
                    }
                },
                enforce: 'pre', // 编译前检查
                exclude: /node_modules/, // 不检测的文件
                include: [__dirname + '/src'], // 要检查的目录
            }
        ]
    }

然后新建.eslintrc.js

module.exports = {
  root: true, // 作用的目录是根目录
  parserOptions: {
    sourceType: 'module' // 按照模块的方式解析
  },
  env: {
    browser: true, // 开发环境配置表示可以使用浏览器的方法
  },
  rules: {
    // 自定义的规则
    "linebreak-style": [0 ,"error", "windows"],
    "indent": ['error', 4]
  }
}

配置详见官网http://eslint.cn/docs/user-guide/

使用airbnb

安装依赖包

npm install -g eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint

然后修改.eslintrc.js

module.exports = {
  root: true, // 作用的目录是根目录
  parserOptions: {
    sourceType: 'module' // 按照模块的方式解析
  },
  env: {
    browser: true, // 开发环境配置表示可以使用浏览器的方法
  },
  extends: 'airbnb', // 导入airbnb规则
  rules: {
    // 自定义的规则
    "linebreak-style": [0 ,"error", "windows"],
    "indent": ['error', 4]
  }
}

然后执行以下命令检测

eslint --ext .js,.vue src

通过eslint命令可以查看参数列表，例如

eslint src //扫描src目录下的.js文件
eslint --ext .js,.vue src // 扫描src下的.js与.vue后缀文件（默认只扫描.js文件）
eslint --fix src // 修正src下面的.js文件格式错误（会自动调整文件）

使用standard

通常使用的插件有 airbnb 外还有 standard
如果不记得以上这么多依赖插件的话，可以先安装

npm install -g eslint-config-standard

然后修改.eslintrc.js的 extends 参数
在执行eslint src的时候会提示缺少的包，然后按照提示安装就行