webpack2教程续之eslint检测

Posted on | Edited on | In

本文承接webpack2教程以及webpack2教程续之自动编译，本文所说的项目目录依旧是webpack2

在上两篇中，我们搭建了基于webpack的vue开发环境，并且启动了监听文件修改自动打包编译

现在我们进入更重要的一环，语法规范，借助于工具ESLint

ESLint

点击这里，前往ESLint官网

点击这里，前往ESLint中文网

下面引用自官网

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具，它是一个以可扩展、每条规则独立、不内置编码风格为理念编写的一个lint工具

点击这里，查看所有规则列表

所有的规则默认都是禁用的。在配置文件中，使用"extends": "eslint:recommended"来启用推荐的规则

安装和配置

安装eslint以及对应的加载器

eslint-loader

1
npm i eslint eslint-loader -S

安装eslint预定义配置规则

代码规范(eslint-config-standard)

  • eslint-config-standard // 依赖下面四个
  • eslint-plugin-import
  • eslint-plugin-node
  • eslint-plugin-promise
  • eslint-plugin-standard
1
npm i eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard -S

安装可以检测vue单组件中的script的工具

eslint-plugin-html

1
npm i eslint-plugin-html -S

安装检测结果格式化工具

eslint-friendly-formatter

1
npm i eslint-friendly-formatter -S

增加配置文件

在项目根目录新增文件.eslintrc.js

.eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
  root: true,
  parserOptions: {
    sourceType: 'module'
  },
  extends: 'standard',
  // 支持检测vue文件中的script
  plugins: [
    'html'
  ],
  // 自定义规则再次添加
  'rules': {
    // 箭头函数只有一个参数时，可以省略圆括号
    'arrow-parens': 0,
    // 关闭不必要的转义字符通知
    'no-useless-escape': 0
  }
}

修改webpack的配置文件

配置webpack，对js和vue文件进行规范检测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module.exports = {
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          cache: true,
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        enforce: 'pre',
        test: /\.vue$/,
        loader: 'eslint-loader',
        options: {
          cache: true,
          formatter: require('eslint-friendly-formatter')
        }
      }
    ]
  }
}

下面是完整的webpack配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
var path = require('path'),
webpack = require('webpack'),
ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'eval',
  entry: {
    main: './src/main.js'
  },
  resolve: {
    // 自动解析确定的扩展
    extensions: ['.js', '.vue'],
    // 告诉 webpack 解析模块时应该搜索的目录
    modules: [
      path.resolve(__dirname, 'src'),
      'node_modules'
    ],
    alias: {
      'src': path.resolve(__dirname, './src')
    }
  },
  output: {
    // 打包输出的目录，这里是绝对路径，必选设置项
    path: path.resolve(__dirname, './dist'),
    // 资源基础路径
    publicPath: '/dist/',
    // 打包输出的文件名
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          cache: true,
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        enforce: 'pre',
        test: /\.vue$/,
        loader: 'eslint-loader',
        options: {
          cache: true,
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true
        }
      },
      {
        test: /\.css$/,
        /*
        use: [
          'style-loader',
          'css-loader'
        ]
        */
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?minimize'
        })
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: "css-loader?minimize" },
            { loader: "less-loader" }
          ]
        })
      },
      {
        // 处理图片文件
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 7186, // inline base64 if <= 7K
          name: 'static/images/[name].[ext]'
        }
      },
      {
        // 处理字体文件
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 7186, // inline base64 if <= 7K
          name: 'static/fonts/[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    // https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new ExtractTextPlugin({ filename: 'static/css/app.css', allChunks: true })
  ]
}

最后

1
2
// 启动webpack的时候会自动进行js规范检测
webpack --color --progress