webpack语法分析

webpack语法分析

在编写js代码的时候容易犯语法错误，IDE提供比较好的语法分析检测工具

js语法分析简明史

JSLint->JSHint->ESLint

webpack中的JSHint（略）

设置ESLint

与另外相比，它允许自定义规则

安装npm i eslint --save-dev

// package.json文件
"scripts": {
  ...
  "test:lint": "eslint . --ext .js --ext .jsx --cache"
}
...

执行npm run test:lint

如果要排除某些文件检测，可以在根目录下创建.eslintignore文件，当然在package.json中指定也是可以的

"scripts": {
  ...
  "test:lint": "eslint . --ext .js --ext .jsx --ignore-path .gitignore --cache"
}
...

配置ESLint，配置文件为.eslintrc，更多配置规则

{
  // Extend existing configuration
  // from ESlint and eslint-plugin-react defaults.
  "extends": [
    "eslint:recommended", "plugin:react/recommended"
  ],
  // Enable ES6 support. If you want to use custom Babel
  // features, you will need to enable a custom parser
  // as described in a section below.
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true
  },
  // Enable custom plugin known as eslint-plugin-react
  "plugins": [
    "react"
  ],
  "rules": {
    // Disable `no-console` rule
    "no-console": 0,
    // Give a warning if identifiers contain underscores
    "no-underscore-dangle": 1,
    // Default to single quotes and raise an error if something
    // else is used
    "quotes": [2, "single"]
  }
}

还有更多文件类型检测…，通过eslint --init会生成.eslintrc文件

Babel中使用ESLint

安装npm i babel-eslint --save-dev

更改.eslintrc配置文件，注释为删除部分

{
  ...
  "parser": "babel-eslint",
  //"parserOptions": {
  //  "ecmaVersion": 6,
  //  "sourceType": "module"
  //},
  ...
}

报错等级：0：禁用规则，1：警告，2：错误

处理如果ESLint报错信息输出：

"scripts": {
  ...
  "test:lint": "eslint . --ext .js --ext .jsx || true"
}
...

Webpack中使用ESLint

安装加载器npm i eslint-loader --save-dev

通过preLoaders设置

// webpack.config.js文件
const common = {
  ...
  module: {
    preLoaders: [
      {
        test: /\.jsx?$/,
        loaders: ['eslint'],
        include: PATHS.app
      }
    ]
  },
  ...
};

这样如果有语法错误，在构建过程就会中断

定制ESLint

• 跳过ESLint规则

// 所有
/* eslint-disable */
...
/* eslint-enable */
// 指定规则
/* eslint-disable no-unused-vars */
...
/* eslint-enable no-unused-vars */
// 设定规则
/* eslint no-comma-dangle:1 */
// 指定行
alert('foo'); // eslint-disable-line no-alert

设置环境

// .eslintrc
{
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  ...
}

自定义规则（略）

CSS语法分析

安装npm i stylelint postcss-loader --save-dev

// webpack.config.js文件
...
const stylelint = require('stylelint');
...
const common = {
  ...
  module: {
    preLoaders: [
      {
        test: /\.css$/,
        loaders: ['postcss'],
        include: PATHS.app
      },
      ...
    ],
    ...
  },
  postcss: function () {
    return [
      stylelint({
        rules: {
          'color-hex-case': 'lower'
        }
      })
    ];
  },
  ...
}

16进制颜色小写，更多规则

使用：

const configSuitcss = require('stylelint-config-suitcss');
...
stylelint(configSuitcss)

EditorConfig

用来统一代码风格~~~(放置在根目录下)

// .editorconfig
root = true
# General settings for whole project
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
# Format specific overrides
[*.md]
trim_trailing_whitespace = false
[app/**.js]
indent_style = space
indent_size = 2

<<上一节:理解chunks >>下一节:编写package