eslint 入门项目搭建过程

2018-06-24 01:32:48来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

github 地址 : https://github.com/gebin/eslint-demo

运行该项目

npm install

npm start

访问 http://localhost:9000

一步一步构建该项目

一开始我想整一个项目,测试一下eslint是怎么玩的,然后我想要基于webpack,因为大部分项目我们是基于webpack来创建的。

于是我新建了一个项目,npm init,一直enter下去,生成了一个package.json,这个文件用来记录需要的node模块。

然后我开始安装需要的node模块,首先是webpack,npm install webpack --save-dev。

然后我开始查找eslint 和webpack如何结合?

在eslint的官网,http://eslint.cn/docs/user-guide/integrations ,我发现了Build Systems --》Webpack: eslint-loader。

我开始按照eslint-loader的说明安装, npm install eslint-loader --save-dev,同时当然需要安装eslint了,npm install eslint --save-dev。

然后我们来配置一下webpack.config.js也就是webpack的配置文件,HtmlWebpackPlugin是用来生成对应index.html入口文件,默认加载我们编译好的js。

 1 const path = require('path'); 
 2 let HtmlWebpackPlugin = require('html-webpack-plugin')
 3 module.exports = {
 4     entry: './index.js',
 5     output: {
 6         path: path.resolve(__dirname, 'dist'),
 7         filename: 'eslint.bundle.js'
 8     },
 9     plugins:[
10         new HtmlWebpackPlugin(),
11     ]
12 };

 

在package.json加入scripts的运行命令

"beta": "webpack --env=beta"

然后npm run beta,我们发现编译成功,出现了一个dist目录,以及对应的生成的eslint.bundle.js。

下一步就是配置eslint-loader了,

 1 const path = require('path');
 2 let HtmlWebpackPlugin = require('html-webpack-plugin')
 3 module.exports = {
 4     entry: './index.js',
 5     output: {
 6         path: path.resolve(__dirname, 'dist'),
 7         filename: 'eslint.bundle.js'
 8     },
 9     module: {
10         rules: [
11             {
12                 test: /\.js$/,
13                 exclude: /node_modules/,
14                 loader: "eslint-loader",
15                 options: {
16                     // eslint options (if necessary) 
17                     // fix : true
18                 }
19             },
20         ],
21     },
22     plugins:[
23         new HtmlWebpackPlugin(),
24     ]
25 };

 

然后尝试一下,在文件根目录创建一个index.js,然后npm run beta 运行,

1 class EslintDemo{
2   func1(){
3     console.log('ddddd')
4   };
5 };
6 
7 var EslintDemoSample = new EslintDemo();
8 EslintDemoSample.func1();

 

你会发现报错了webpack No ESLint configuration found

这是告诉我们还没有配置通过什么规则来对我们的代码进行校验,参照eslint入门,我们执行./node_modules/.bin/eslint --init这个命令就可以了,选择需要的校验规则,这里我选择的是standard模板。

然后,npm run beta,就会发现报错信息了,提示你哪些代码写的是不对的。

但是这样不适合我们的开发模式,需要不断运行npm run beta,所以我们引入webpack-dev-server。

同样是npm install webpack-dev-server --save-dev,然后配置devserver配置项。

 1 const path = require('path');
 2 let HtmlWebpackPlugin = require('html-webpack-plugin')
 3 
 4 module.exports = {
 5     entry: './index.js',
 6 
 7     output: {
 8         path: path.resolve(__dirname, 'dist'),
 9         filename: 'eslint.bundle.js'
10     },
11 
12     devServer:{
13         contentBase: path.join(__dirname, "dist"),
14         compress: true,
15         port: 9000
16     },
17 
18     module: {
19         rules: [
20             {
21                 test: /\.js$/,
22                 exclude: /node_modules/,
23                 loader: "eslint-loader",
24                 options: {
25                     // eslint options (if necessary) 
26                     // fix : true
27                 }
28             },
29         ],
30     },
31 
32     plugins:[
33         new HtmlWebpackPlugin(),
34     ]
35 };

 

在package.json的scripts中加入

"start": "webpack-dev-server",

至此,npm start 启动项目。然后在网页中打开 http://localhost:9000 就可以访问本页面了。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript中的垃圾回收机制

下一篇:数组去重的三种方法