從零開始的webpack生活-0x013：LintingLoader格式校驗

ephererid 發布于2019-08-21 17:32 / 2771人閱讀

摘要：概述上一章講的是腳本裝載相關的，這一章見得是腳本格式校驗相關的環境配置使用校驗格式這份配置是偷的安裝依賴包修改配置文件添加配置文件編寫測試代碼張三打包輸出張三

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從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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