亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

從零開始的webpack生活-0x013：LintingLoader格式校驗(yàn)

ephererid / 2852人閱讀

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

0x001 概述

上一章講的是腳本裝載相關(guān)的loader，這一章見得是腳本格式校驗(yàn)相關(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校驗(yàn)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

編寫測(cè)試代碼

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個(gè)問題

let和name之間只能有一個(gè)空格

name變量沒有使用過(guò)

張三前邊沒有空格

張三使用了雙引號(hào)，應(yīng)該用單引號(hào)

修復(fù)

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]

更多配置，請(qǐng)查閱eslint文檔

0x006 資源

源代碼

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89642.html

相關(guān)文章

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

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

    Turbo 評(píng)論0 收藏0

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

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

    The question 評(píng)論0 收藏0

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

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

    NervosNetwork 評(píng)論0 收藏0

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

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

    li21 評(píng)論0 收藏0

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

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

    ityouknow 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<