博客
关于我
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/

你可能感兴趣的文章
Mysql8在Windows上离线安装时忘记root密码
查看>>
MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
查看>>
mysql8的安装与卸载
查看>>
MySQL8,体验不一样的安装方式!
查看>>
MySQL: Host '127.0.0.1' is not allowed to connect to this MySQL server
查看>>
Mysql: 对换(替换)两条记录的同一个字段值
查看>>
mysql:Can‘t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock‘解决方法
查看>>
MYSQL:基础——3N范式的表结构设计
查看>>
MYSQL:基础——触发器
查看>>
Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
查看>>
mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
查看>>
mysqldump 参数--lock-tables浅析
查看>>
mysqldump 导出中文乱码
查看>>
mysqldump 导出数据库中每张表的前n条
查看>>
mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
查看>>
Mysqldump参数大全(参数来源于mysql5.5.19源码)
查看>>
mysqldump备份时忽略某些表
查看>>
mysqldump实现数据备份及灾难恢复
查看>>
mysqldump数据库备份无法进行操作只能查询 --single-transaction
查看>>
mysqldump的一些用法
查看>>