从零开始的webpack生活-0x013：LintingLoader格式校验

ephererid 发布于2019-08-21 17:32 / 2765人阅读

摘要：概述上一章讲的是脚本装载相关的，这一章见得是脚本格式校验相关的环境配置使用校验格式这份配置是偷的安装依赖包修改配置文件添加配置文件编写测试代码张三打包输出张三

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 资源

源代码

GPU云服务器云服务器从零开始的邮件服务器从零开始 linux从零开始 python从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89642.html

从零开始的webpack生活-0x001：webpack初次相逢

摘要：同时不能直接单纯的指定输出的文件名称，比如，将会报错，可以换成以下方式指定，或者其他类似方式。如果打包过程出现错误，比如语法错误，将会在控制台以红色文字显示，并且在你修复之后会再次打包。 0x001 概述其实我不知道怎么写，所以决定就一块一块的写点平常配置的过程，根据不同东西稍微分区一下就好了 0x002 初始化项目结构 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x005：DefinePlugin奇妙用处

摘要：注意该插件是简单的字符串替换，所以如果是定义常量最好使用包裹要替换的内容，或者使用转化，否则会变成代码直接插入，比如版本号这样替换的时候就会变成而不会变成导致错误的数据格式。 0x001 概述上一章讲的是js压缩混淆，和这一章没有半毛钱关系，这章讲的是DefinePlugin，一个好像没有用，但其实很好用的一个插件，我很喜欢，嘿嘿嘿！ 0x002 插件介绍说白了，这是一个简单的字符...

The question 2019-08-21 17:28 评论0 收藏0
从零开始的webpack生活-0x009：FilesLoader装载文件

摘要：修改配置文件匹配的文件名，这里匹配后缀为的，只要了该文件名结尾的文件，都将使用这个来处理命中后使用的加载器查看结果，和之前一致，推荐使用配置文件形式，可以保持引入文件格式的一致性。有利于维护和美观更多配置，可以查阅关于部分。 0x001 概述上一章讲的是DLL加速编译，这一章开始讲loader相关的部分，但是关于plugin的部分善未完结，因为即将要讲的ExtractTextWebp...

NervosNetwork 2019-08-21 17:31 评论0 收藏0
从零开始的webpack生活-0x006：providerPlugin全局定义

摘要：插件介绍就是提供全局变量啦全局定义栗子初始化项目安装依赖包编写添加插件，并定义调用打包并用浏览器打开查看控制台全局定义自定义函数栗子添加定义添加文件调用打包并执行输出资源源代码 0x001 概述上一章讲的是definePlugin的用法，和这一章依旧没有任何关系，这一章讲的时候providerPlugin。 0x002 插件介绍就是提供全局变量啦 0x003 全局定义jquery栗...

li21 2019-08-21 17:28 评论0 收藏0
从零开始的webpack生活-0x008：DLL加速编译

摘要：概述上一章讲的是，和这一章依旧没有丝毫关系，这一章讲的是和。插件介绍这个插件啊，用来预打包一些第三方库，因为他们不经常修改，而每次我们引用他们之后都要将他们不断的打包一次又一次，不但浪费了调试编译的时间，还浪费了时间。 0x001 概述上一章讲的是CommonChunkPlugin，和这一章依旧没有丝毫关系，这一章讲的是DllPlugin和DllReferencePlugin。 0x...

ityouknow 2019-08-21 17:29 评论0 收藏0