成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

ephererid / 2801人閱讀

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

0x001 概述

上一章講的是腳本裝載相關(guān)的loader，這一章見得是腳本格式校驗相關(guān)的loader

0x002 環(huán)境配置 
$ 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 資源

源代碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89642.html

相關(guān)文章

  • 從零開始的webpack生活-0x001：webpack初次相逢

    摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現(xiàn)錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復之后會再次打包。 0x001 概述 其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...

    Turbo 評論0 收藏0

  • 從零開始的webpack生活-0x005：DefinePlugin奇妙用處

    摘要：注意該插件是簡單的字符串替換，所以如果是定義常量最好使用包裹要替換的內(nèi)容，或者使用轉(zhuǎn)化，否則會變成代碼直接插入，比如版本號這樣替換的時候就會變成而不會變成導致錯誤的數(shù)據(jù)格式。 0x001 概述 上一章講的是js壓縮混淆，和這一章沒有半毛錢關(guān)系，這章講的是DefinePlugin，一個好像沒有用，但其實很好用的一個插件，我很喜歡，嘿嘿嘿！ 0x002 插件介紹 說白了，這是一個簡單的字符...

    The question 評論0 收藏0

  • 從零開始的webpack生活-0x009：FilesLoader裝載文件

    摘要：修改配置文件匹配的文件名，這里匹配后綴為的，只要了該文件名結(jié)尾的文件，都將使用這個來處理命中后使用的加載器查看結(jié)果，和之前一致，推薦使用配置文件形式，可以保持引入文件格式的一致性。有利于維護和美觀更多配置，可以查閱關(guān)于部分。 0x001 概述 上一章講的是DLL加速編譯，這一章開始講loader相關(guān)的部分，但是關(guān)于plugin的部分善未完結(jié)，因為即將要講的ExtractTextWebp...

    NervosNetwork 評論0 收藏0

  • 從零開始的webpack生活-0x006：providerPlugin全局定義

    摘要：插件介紹就是提供全局變量啦全局定義栗子初始化項目安裝依賴包編寫添加插件，并定義調(diào)用打包并用瀏覽器打開查看控制臺全局定義自定義函數(shù)栗子添加定義添加文件調(diào)用打包并執(zhí)行輸出資源源代碼 0x001 概述 上一章講的是definePlugin的用法，和這一章依舊沒有任何關(guān)系，這一章講的時候providerPlugin。 0x002 插件介紹 就是提供全局變量啦 0x003 全局定義jquery栗...

    li21 評論0 收藏0

  • 從零開始的webpack生活-0x008：DLL加速編譯

    摘要：概述上一章講的是，和這一章依舊沒有絲毫關(guān)系，這一章講的是和。插件介紹這個插件啊，用來預打包一些第三方庫，因為他們不經(jīng)常修改，而每次我們引用他們之后都要將他們不斷的打包一次又一次，不但浪費了調(diào)試編譯的時間，還浪費了時間。 0x001 概述 上一章講的是CommonChunkPlugin，和這一章依舊沒有絲毫關(guān)系，這一章講的是DllPlugin和DllReferencePlugin。 0x...

    ityouknow 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<