React多页面应用9(webpack4 引入eslint代码检查)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!


1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04


2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08


3、React多页面应用3(webpack4 多页面实现)---2018.04.09


4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018.04.10


5、React多页面应用5(webpack4 多页面自动化生成多入口文件)---2018.04.11


6、React多页面应用6(webpack4 开发环境打包性能小提升)---2018.04.12


7、React多页面应用7(webpack4 生产环境配置)---2018.04.13


8、React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)---2018.04.16


9、React多页面应用9(webpack4 引入eslint代码检查)---2018.04.17


开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

团队开发,如何保持代码风格统一,引入eslint代码检查是一个不错的选择!

当然现在也有更好的替代方案就是微软的TypeScript,

今天先讲讲eslint


1、安装依赖

npm i -D eslint-config-react-app@2.1.0 eslint-loader@2.0.0 eslint-plugin-react@7.7.0 eslint-plugin-import@2.10.0 react-dev-utils@5.0.0 eslint-plugin-jsx-a11y@5.1.1 babel-eslint@8.2.2 eslint-plugin-flowtype@2.46.1 eslint@4.19.1


2、修改 package.json

添加如下代码

"eslintConfig": {
"extends": "react-app",
 "rules": {
"import/no-webpack-loader-syntax": 0,
   "no-script-url": 0,
   "jsx-a11y/href-no-hash": 2
 }
}



3、修改 webpack.dev.conf.js


头部引入

const eslintFormatter = require('react-dev-utils/eslintFormatter');


配置内 加入如下代码

{
test: /\.(js|jsx)$/,
   enforce: 'pre',
   use: [
{
options: {
formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
               // @remove-on-eject-begin
               baseConfig: {
extends: [require.resolve('eslint-config-react-app')],
               },
               //ignore: false,
               useEslintrc: false,
               // @remove-on-eject-end
           },
           loader: require.resolve('eslint-loader'),
       },
   ],
   include: [
path.resolve(__dirname, "../../app")
],
   exclude: [
path.resolve(__dirname, "../../node_modules")
],
},




完整代码

const webpack = require('webpack');//引入webpack
const opn = require('opn');//打开浏览器
const merge = require('webpack-merge');//webpack配置文件合并
const path = require("path");
const baseWebpackConfig = require("./webpack.base.conf");//基础配置
const webpackFile = require("./webpack.file.conf");//一些路径配置
const eslintFormatter = require('react-dev-utils/eslintFormatter');

let config = merge(baseWebpackConfig, {
/*设置开发环境*/
   mode: 'development',
   output: {
path: path.resolve(webpackFile.devDirectory),
       filename: 'js/[name].js',
       chunkFilename: "js/[name].js",
       publicPath: ''
   },
   optimization: {
//包清单
       runtimeChunk: {
name: "manifest"
       },
       //拆分公共包
       splitChunks: {
cacheGroups: {
//项目公共组件
               common: {
chunks: "initial",
                   name: "common",
                   minChunks: 2,
                   maxInitialRequests: 5,
                   minSize: 0
               },
               //第三方组件
               vendor: {
test: /node_modules/,
                   chunks: "initial",
                   name: "vendor",
                   priority: 10,
                   enforce: true
               }
}
}
},
   plugins: [
/*设置热更新*/
       new webpack.HotModuleReplacementPlugin(),
   ],
   module: {
rules: [
{
test: /\.(js|jsx)$/,
               use: [
'cache-loader',
                   'babel-loader',
               ],
               include: [
path.resolve(__dirname, "../../app"),
                   path.resolve(__dirname, "../../entryBuild")
],
               exclude: [
path.resolve(__dirname, "../../node_modules")
],
           },
           {
test: /\.(js|jsx)$/,
               enforce: 'pre',
               use: [
{
options: {
formatter: eslintFormatter,
                           eslintPath: require.resolve('eslint'),
                           // @remove-on-eject-begin
                           baseConfig: {
extends: [require.resolve('eslint-config-react-app')],
                           },
                           //ignore: false,
                           useEslintrc: false,
                           // @remove-on-eject-end
                       },
                       loader: require.resolve('eslint-loader'),
                   },
               ],
               include: [
path.resolve(__dirname, "../../app")
],
               exclude: [
path.resolve(__dirname, "../../node_modules")
],
           },
           {
test: /\.(css|pcss)$/,
               loader: 'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap',
               exclude: /node_modules/
           },
           {
test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/,
               loader: 'file-loader?name=[name].[ext]&outputPath=' + webpackFile.resource + '/'
           }
]
},
   /*设置api转发*/
   devServer: {
host: '0.0.0.0',
       port: 8080,
       hot: true,
       inline: true,
       contentBase: path.resolve(webpackFile.devDirectory),
       historyApiFallback: true,
       disableHostCheck: true,
       proxy: [
{
context: ['/api/**', '/u/**'],
               target: 'http://192.168.12.100:8080/',
               secure: false
           }
],
       /*打开浏览器 并打开本项目网址*/
       after() {
opn('http://localhost:' + this.port);
       }
}
});
module.exports = config;


至此我们就配置完了


4、执行命令查看

npm run dev 



ok! 一切正常!

我们来测试下!

在 app\component\index\Index.jsx 组件中 加一个没有用到的变量!



这时浏览器会给出警告提示


删除这个变量,浏览器警告会自动清除!



本文完 

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!

阅读更多
文章标签: react webpack
个人分类: 前端
上一篇React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭