博客
关于我
webpack配置【一】webpack-cli中加入eslint规范,自动化测试,浮层错误抛出
阅读量:531 次
发布时间:2019-03-08

本文共 2519 字,大约阅读时间需要 8 分钟。

eslint检测和修复

为了确保项目代码的质量,eslint是一个强大的代码检测工具。本文将介绍如何在项目中集成eslint进行自动检测和修复。

1.下载依赖

通过cnpm安装eslint及相关依赖:
cnpm i eslint --save-dev  
cnpm i eslint-loading --save-dev

2.配置eslint

在项目根目录中创建一个新文件
.eslintrc.js
module.exports={    env: {        browser: true,        commonjs: true,        es6: true,        node: true,    },    extends: 'eslint:recommended',    parserOptions: {        sourceType: 'module',    },    rules: {        'comma-dangle': ['error', 'always-multiline'],        indent: ['error',2],        'linebreak-style': ['error','unix'],        quotes: ['error', 'single'],        semi: ['error','always'],        'no-unused-vars': ['warn'],        'no-console': 0,    },};

3.在pakage.json中配置脚本

添加以下脚本:
"scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "webpack-dev-server --env development",    "build": "webpack --env production",    "lintjs": "eslint app/ webpack.*.js --cache"  },

4.运行eslint

执行以下命令进行检测:
npm run lintjs
若需要自动修复错误可执行:
npm run lintjs -- --fix

5.在webpack.config.js中集成eslint

在module中添加eslint-loader规则:
const path=require('path');//webpack生成htmlconst HtmlWebpackPlugin=require('html-webpack-plugin');const PATHS={  app: path.join(__dirname, 'app'),  build: path.join(__dirname, 'build'),};module.exports={  devServer:{     host: process.env.HOST, //Defaults to 'localhost    port: 80,  //Defalut to 8080  },  entry:{    app:PATHS.app,  },  output: {    path: PATHS.build,    filename: '[name].js',  },  module:{    //运行监测    rules:[      {        test: /\.js$/,        enforce: 'pre',                loader:'eslint-loader',        options:{          emitWarning: true,        },      },    ],  },  plugins:[    //生成html    new HtmlWebpackPlugin({      title: 'Webpack demo',    }),  ],};

6.运行项目

启动开发服务器:
npm run start

7.错误浮层显示

在devServer中配置显示错误浮层:
const path=require('path');const HtmlWebpackPlugin=require('html-webpack-plugin');const PATHS={  app: path.join(__dirname, 'app'),  build: path.join(__dirname, 'build'),};module.exports={  devServer:{     host: process.env.HOST, //Defaults to 'localhost    port: 80,  //Defalut to 8080    // 浮层错误抛出    overlay: {      errors: true,      warnings: true,    },  },  entry:{    app:PATHS.app,  },  output: {    path: PATHS.build,    filename: '[name].js',  },  module:{    rules:[      {        test: /\.js$/,        enforce: 'pre',                loader:'eslint-loader',        options:{          emitWarning: true,        },      },    ],  },  plugins:[    new HtmlWebpackPlugin({      title: 'Webpack demo',    }),  ],};

转载地址:http://xrmnz.baihongyu.com/

你可能感兴趣的文章
Mysql学习总结(77)——温故Mysql数据库开发核心原则与规范
查看>>
Mysql学习总结(78)——MySQL各版本差异整理
查看>>
Mysql学习总结(79)——MySQL常用函数总结
查看>>
Mysql学习总结(7)——MySql索引原理与使用大全
查看>>
Mysql学习总结(80)——统计数据库的总记录数和库中各个表的数据量
查看>>
Mysql学习总结(81)——为什么MySQL不推荐使用uuid或者雪花id作为主键?
查看>>
Mysql学习总结(82)——MySQL逻辑删除与数据库唯一性约束如何解决?
查看>>
Mysql学习总结(83)——常用的几种分布式锁:ZK分布式锁、Redis分布式锁、数据库分布式锁、基于JDK的分布式锁方案对比总结
查看>>
Mysql学习总结(84)—— Mysql的主从复制延迟问题总结
查看>>
Mysql学习总结(85)——开发人员最应该明白的数据库设计原则
查看>>
Mysql学习总结(8)——MySql基本查询、连接查询、子查询、正则表达查询讲解
查看>>
Mysql学习总结(9)——MySql视图原理讲解与使用大全
查看>>
Mysql学习笔记 - 在Centos7环境下离线安装Mysql
查看>>
MySQL学习笔记十七:复制特性
查看>>
Mysql学习第一课-mysql的定义及sql语句
查看>>
mysql学号的字符长度_MYSQL--2
查看>>
mysql安全模式: sql_safe_updates
查看>>
mysql安装,卸载,连接
查看>>
MySQL安装之没有配置向导
查看>>
mysql安装出现 conflicts with mysql*的解决办法
查看>>