webpack从入门到会玩（5）- js语法检查

最新推荐文章于 2023-03-29 15:46:23 发布

素者素心

最新推荐文章于 2023-03-29 15:46:23 发布

阅读量412

点赞数 2

分类专栏： JavaScript 文章标签： javascript webpack

本文链接：https://blog.csdn.net/tq26556570/article/details/108331327

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

概述

实际工作中很多时候都是多人协同开发一个项目，这时需要保证大家的代码可读性和规范性，所以webpack提供了js语法检查功能eslint，可以让团队中的每位成员都保持相近的编码风格。

准备工作

新建一个项目eslint-demo，基本配置一下webpack。

在这里插入图片描述

index.js（写一个格式很丑的js）：

function sum(a,b){
    return a+b
}

sum(1,2)

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    
</body>
</html>

webpack.config.js：

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'build.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: []
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

安装

webpack使用eslint需要安装eslint和eslint-loader。

npm i eslint eslint-loader -D

添加eslint配置文件

eslint需要添加一些配置才能起作用，配置有两种方式，第一种是在项目根目录添加.eslintrc.js配置文件，第二种是在package.json中添加eslintConfig配置项。为了好管理，建议选择第一种。

在这里插入图片描述

.eslintrc.js：

module.exports = {
	// 配置eslint的代码规范
	// airbnb-base是比较好的代码规范
	// 这里可以是数组，同时配置多个规范
    extends: 'airbnb-base'
}

eslint的详细配置可以参考官方网站。

在npm官网上可以看到airbnb相关说明，使用之前需要安装eslint-config-airbnb-base和eslint-plugin-import。

npm i eslint-config-airbnb-base eslint-plugin-import -D

配置eslint-loader

webpack.config.js：

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'build.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // js语法检查
            {
                test: /\.js$/,
                loader: 'eslint-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

看看效果

构建项目…

在这里插入图片描述

可以看到构建时eslint提示很多错误，这些都是编码不规范的错误，但是我们如果看着这些错误一个个找就有点麻烦，可以让eslint自动帮我们处理好，只需要修改一下eslint-loader的配置就可以了。

webpack.config.js：

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'build.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // js语法检查
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                options: {
                    // 自动处理不规范的代码
                    fix: true
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}