博客
关于我
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底层概述—2.InnoDB磁盘结构
查看>>
MySQL底层概述—3.InnoDB线程模型
查看>>
MySQL底层概述—4.InnoDB数据文件
查看>>
MySQL底层概述—5.InnoDB参数优化
查看>>
MySQL底层概述—6.索引原理
查看>>
MySQL底层概述—7.优化原则及慢查询
查看>>
MySQL底层概述—8.JOIN排序索引优化
查看>>
MySQL底层概述—9.ACID与事务
查看>>
Mysql建立中英文全文索引(mysql5.7以上)
查看>>
mysql建立索引的几大原则
查看>>
Mysql建表中的 “FEDERATED 引擎连接失败 - Server Name Doesn‘t Exist“ 解决方法
查看>>
mysql开启bin-log日志,用于canal同步
查看>>
MySQL开源工具推荐,有了它我卸了珍藏多年Nactive!
查看>>
MySQL异步操作在C++中的应用
查看>>
MySQL引擎讲解
查看>>
Mysql当前列的值等于上一行的值累加前一列的值
查看>>
MySQL当查询的时候有多个结果,但需要返回一条的情况用GROUP_CONCAT拼接
查看>>
MySQL必知必会(组合Where子句,Not和In操作符)
查看>>
MySQL必知必会总结笔记
查看>>
MySQL快速入门
查看>>