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

原创 2018年04月17日 10:12:10

本教程总共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多页面应用7(引入eslint代码检查)

本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等)...
  • oKeYue
  • oKeYue
  • 2018-01-03 10:17:01
  • 85

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

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018....
  • oKeYue
  • oKeYue
  • 2018-04-04 10:31:26
  • 173

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

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018....
  • oKeYue
  • oKeYue
  • 2018-04-09 11:35:17
  • 60

React多页面应用4(webpack自动化生成多入口页面)

本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等)...
  • oKeYue
  • oKeYue
  • 2017-12-31 18:01:16
  • 763

react+webpack多页面程序

  • 2017年11月27日 00:21
  • 895KB
  • 下载

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

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018....
  • oKeYue
  • oKeYue
  • 2018-04-12 10:42:10
  • 38

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

本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等)...
  • oKeYue
  • oKeYue
  • 2017-12-29 12:41:06
  • 201

create-react-app关闭eslint提醒

首先运行npm run eject。然后在package.json文件中配置如下:只要将报错的提示设置为off即可。eslint规则:"off" 或者 0:关闭规则。"w...
  • csdn9_14
  • csdn9_14
  • 2018-03-19 11:33:28
  • 235

webpack3最新版本配置研究(三)多入口,html-webpack-plugin, extract-text-webpack-plugin

虽然现在有很多单页应用,不过还是多页面用的比较多一些,先研究了下多入口的配置 //随便生成一个js来测试,我在根目录新建了一个entry.js文件 console.log('123'); 之前...
  • qq_20334295
  • qq_20334295
  • 2017-07-16 23:05:22
  • 3423

深入浅出React之第七章:使用React-Router实现多页面应用

现实中,应用往往包含很多功能,这些功能无法通过一个页面展示,所以应用往往是‘多页面应用’。而且,用户在这些页面之间来回切换,开发者要做的就是保证用户的操作顺畅。最好的解决办法就是虽然逻辑上是‘多页面应...
  • qq_26708777
  • qq_26708777
  • 2017-10-09 00:44:15
  • 1021
收藏助手
不良信息举报
您举报文章:React多页面应用9(webpack4 引入eslint代码检查)
举报原因:
原因补充:

(最多只允许输入30个字)