首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React多页面应用7(引入eslint代码检查)

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

作者头像
前端人人
发布2018-04-11 17:14:26
8480
发布2018-04-11 17:14:26
举报
文章被收录于专栏:前端人人前端人人

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

1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28

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

3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30

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

5.React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)----2018.01.01

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

7.React多页面应用7(引入eslint代码检查)----2018.01.03

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

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

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

今天先讲讲eslint

还是先引入依赖(注意安装命令太长, 复制后改成一行)

npm i -D eslint eslint-config-react-app eslint-loader eslint-plugin-flowtype 
eslint-plugin-import eslint-plugin-jsx-a11y@5.1.1 eslint-plugin-react 
react-dev-utils babel-eslint

修改 package.json

添加如下代码

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

修改 webpack.dev.conf.js

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, {
    output: {
        path: path.resolve(webpackFile.devDirectory),
        filename: 'js/[name].js',
        chunkFilename: "js/[name]-[id].js",
        publicPath: ''
    },
    plugins: [
        /*设置开发环境*/
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('development'),
            }
        }),
        /*设置热更新*/
        new webpack.HotModuleReplacementPlugin(),
        /* common 业务公共代码,vendor引入第三方 */
        new webpack.optimize.CommonsChunkPlugin({
            name: ["common", "vendor"],
        }),
        /* 防止 vendor hash 变化 */
        // extract webpack runtime and module manifest to its own file in order to
        // prevent vendor hash from being updated whenever app bundle is updated
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            chunks: ['vendor']
        }),
    ],
    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;

添加两处代码

引入

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")
    ],
},

至此我们就配置完了

执行

npm run dev

ok! 一切正常!

我们来测试下!

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

我们看看浏览器什么反映,

浏览器控制台,清楚的给了提示!

是不是很爽!!!!

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-01-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端人人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
腾讯云代码分析
腾讯云代码分析(内部代号CodeDog)是集众多代码分析工具的云原生、分布式、高性能的代码综合分析跟踪管理平台,其主要功能是持续跟踪分析代码,观测项目代码质量,支撑团队传承代码文化。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档