eslint 入门项目搭建过程
github 地址 : https://github.com/gebin/eslint-demo
运行该项目
npm install
npm start
一步一步构建该项目
一开始我想整一个项目,测试一下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 就可以访问本页面了。
转载于:https://www.cnblogs.com/dahe1989/p/8470612.html
- 点赞
- 收藏
- 分享
- 文章举报
- eslint 入门项目搭建过程
- 利用vue-cli脚手架搭建项目时,在我入门时开启了eslint 一直报黄色的警告 有时候非常的烦恼 所以我要去掉它
- Qt入门之基础篇 ( 二 ) :Qt项目建立、编译、运行和发布过程解析
- Sencha Touch入门:Sencha Touch开发环境搭建及使用 Sencha Cmd 自动创建项目框架
- Java RMI入门详细搭建过程
- netty基础入门(二)简单项目搭建
- 【超全必看】Spring框架基础入门学习总结笔记(附搭建过程及代码)【下】
- webpack搭建项目入门
- 一个用CLR写存储过程的项目回顾 (二) 快速入门
- 学习搭建maven风格的springmvc项目(一)——入门
- Spring MVC入门基础项目环境搭建
- 使用Maven搭建SpringMVC项目(入门详解)
- STS搭建SVN过程及同步项目(详细)
- spring mvc项目的初次搭建的完整过程
- 结对-结对编项目贪吃蛇-开发环境搭建过程
- scrapy入门教程(二)安装和项目搭建
- Spring boot项目搭建入门
- [置顶] 使用IDEA搭建Spring Boot入门项目
- (三层架构入门)最基本的三层架构搭建方法(详细过程及所有代码)
- 我们的一个已投产项目的高可用数据库实战 - mongo 副本集的搭建详细过程