博客
关于我
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查询优化之索引
查看>>
mysql查询储存过程,函数,触发过程
查看>>
mysql查询总成绩的前3名学生信息
查看>>
mysql查询慢排查
查看>>
MySQL查询报错ERROR:No query specified
查看>>
mysql查询数据库储存数据的占用容量大小
查看>>
MySQL查询数据库所有表名及其注释
查看>>
MySQL查询数据表中数据记录(包括多表查询)
查看>>
MySQL查询结果排序
查看>>
MYSQL查询语句优化
查看>>
mysql查询语句能否让一个字段不显示出来_天天写order by,你知道Mysql底层执行原理吗?
查看>>
MySQL查询语句:揭秘专家秘籍,让你秒变数据库达人!
查看>>
mysql查询超时对PHP执行的影响
查看>>
mysql查询输出到excel文件_如何保存mysql查询输出到excel或.txt文件?
查看>>
mysql查询过程
查看>>
MySQL模拟Oracle序列sequence
查看>>
Mysql模糊查询like效率,以及更高效的写法
查看>>
MySQL死锁套路:一次诡异的批量插入死锁问题分析
查看>>
Mysql死锁问题Deadlock found when trying to get lock;try restarting transaction
查看>>
mysql每个数据库的最大连接数_MySQL数据库最大连接数
查看>>