摘要:概述上一章讲的是脚本装载相关的,这一章见得是脚本格式校验相关的环境配置使用校验格式这份配置是偷的安装依赖包修改配置文件添加配置文件编写测试代码张三打包输出张三
0x001 概述
上一章讲的是脚本装载相关的loader,这一章见得是脚本格式校验相关的loader
0x002 环境配置$ mkdir 0x013-linting-loader $ cd 0x013-linting-loader $ npm init -y $ npm install --save-dev webpack $ touch ./src/index.js $ vim webpack.config.js // ./webpack.config.js const path = require("path"); module.exports = { entry : { "index": ["./src/index.js"], }, output: { path : path.join(__dirname, "dist"), filename: "[name].bundle.js" } ;0x002 使用eslint校验js格式(这份配置是偷vue的)
安装依赖包
cnpm install --save-dev eslint eslint-loader eslint-config-standard eslint-friendly-formatter eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-promis eslint-plugin-standard
修改配置文件
./webpack.config.js const path = require("path"); module.exports = { entry : { "index": ["./src/index.js"], }, output: { path : path.join(__dirname, "dist"), filename: "[name].bundle.js" }, module: { rules: [ { test : /.js$/, exclude: /node_modules/, enforce: "pre", include: [path.resolve(__dirname, "src")], loader : "eslint-loader", options: { formatter: require("eslint-friendly-formatter") } } ] } } ;
添加eslint配置文件
// .eslintrc.js module.exports = { root : true, parser : "babel-eslint", parserOptions: { sourceType: "module" }, env : { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends : "standard", // required to lint *.vue files plugins : [ "html" ], // add your custom rules here "rules" : { // allow paren-less arrow functions "arrow-parens" : 0, // allow async-await "generator-star-spacing": 0, // allow debugger during development "no-debugger" : 0 } } // .eslintignore dist/*.js // ./.editconfig root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true
编写测试代码
let name="张三"
打包
$ webpack # 输出 ERROR in ./src/index.js ✘ http://eslint.org/docs/rules/no-multi-spaces Multiple spaces found before "name" src/index.js:1:6 let name="张三" ^ ✘ http://eslint.org/docs/rules/no-unused-vars "name" is assigned a value but never used src/index.js:1:6 let name="张三" ^ ✘ http://eslint.org/docs/rules/space-infix-ops Infix operators must be spaced src/index.js:1:10 let name="张三" ^ ✘ http://eslint.org/docs/rules/quotes Strings must use singlequote src/index.js:1:11 let name="张三" ^ ✘ 4 problems (4 errors, 0 warnings)
这里爆出4个问题
let和name之间只能有一个空格
name变量没有使用过
张三前边没有空格
张三使用了双引号,应该用单引号
修复
let name = "张三" console.log(name)
再次打包
$ webpack # 输出 Hash: 4014a2bcb0ede78b2270 Version: webpack 3.8.1 Time: 616ms Asset Size Chunks Chunk Names index.bundle.js 2.63 kB 0 [emitted] index [0] multi ./src/index.js 28 bytes {0} [built] [2] ./src/index.js 34 bytes {0} [built]
更多配置,请查阅eslint文档
0x006 资源源代码
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/89642.html
摘要:同时不能直接单纯的指定输出的文件名称,比如,将会报错,可以换成以下方式指定,或者其他类似方式。如果打包过程出现错误,比如语法错误,将会在控制台以红色文字显示,并且在你修复之后会再次打包。 0x001 概述 其实我不知道怎么写,所以决定就一块一块的写点平常配置的过程,根据不同东西稍微分区一下就好了 0x002 初始化项目结构 $ mkdir webpack_study $ cd webp...
摘要:注意该插件是简单的字符串替换,所以如果是定义常量最好使用包裹要替换的内容,或者使用转化,否则会变成代码直接插入,比如版本号这样替换的时候就会变成而不会变成导致错误的数据格式。 0x001 概述 上一章讲的是js压缩混淆,和这一章没有半毛钱关系,这章讲的是DefinePlugin,一个好像没有用,但其实很好用的一个插件,我很喜欢,嘿嘿嘿! 0x002 插件介绍 说白了,这是一个简单的字符...
摘要:修改配置文件匹配的文件名,这里匹配后缀为的,只要了该文件名结尾的文件,都将使用这个来处理命中后使用的加载器查看结果,和之前一致,推荐使用配置文件形式,可以保持引入文件格式的一致性。有利于维护和美观更多配置,可以查阅关于部分。 0x001 概述 上一章讲的是DLL加速编译,这一章开始讲loader相关的部分,但是关于plugin的部分善未完结,因为即将要讲的ExtractTextWebp...
摘要:插件介绍就是提供全局变量啦全局定义栗子初始化项目安装依赖包编写添加插件,并定义调用打包并用浏览器打开查看控制台全局定义自定义函数栗子添加定义添加文件调用打包并执行输出资源源代码 0x001 概述 上一章讲的是definePlugin的用法,和这一章依旧没有任何关系,这一章讲的时候providerPlugin。 0x002 插件介绍 就是提供全局变量啦 0x003 全局定义jquery栗...
摘要:概述上一章讲的是,和这一章依旧没有丝毫关系,这一章讲的是和。插件介绍这个插件啊,用来预打包一些第三方库,因为他们不经常修改,而每次我们引用他们之后都要将他们不断的打包一次又一次,不但浪费了调试编译的时间,还浪费了时间。 0x001 概述 上一章讲的是CommonChunkPlugin,和这一章依旧没有丝毫关系,这一章讲的是DllPlugin和DllReferencePlugin。 0x...
阅读 3498·2021-11-25 09:43
阅读 2561·2021-11-18 13:11
阅读 2103·2019-08-30 15:55
阅读 3241·2019-08-26 11:58
阅读 2782·2019-08-26 10:47
阅读 2153·2019-08-26 10:20
阅读 1234·2019-08-23 17:59
阅读 2934·2019-08-23 15:54