【小册笔记】Babel+TS+ESLint

babel 是什么

Babel 是一个开源 JavaScript 转编译器，它能将高版本 —— 如 ES6 代码等价转译为向后兼容，能直接在旧版 JavaScript 引擎运行的低版本代码，例如：

// 使用 Babel 转译前
arr.map(item => item + 1)
// 转译后（编译箭头函数，解决低版本浏览器不支持箭头函数）
arr.map(function (item){
  return item + 1;
})

官方文档是这样解释的：

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

• 语法转换
• 通过 Polyfill 方式在目标环境中添加缺失的功能（通过引入第三方 polyfill 模块，例如 core-js）
• 源码转换（codemods）

那么在 webpack 下如何使用 babel 呢？这时候我们需要在项目添加 babel-loader 模块，命令如下：

npm i -D @babel/core @babel/preset-env babel-loader

引入完成之后，我们需要在配置文件中添加模块处理规则，例如：

module.exports = {
  entry: './src/index', 、
  mode: 'development',
  devtool: false,
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  /* ... */
  module: {
    rules: [
      {
        test: /\.js$/, // 命中文件名规则
        use: ['babel-loader'], // 符合的文件都会被传入进行编译
        // rule.options 配置babel功能逻辑，需要安装preset-env
        // @babel/preset-env是一种Babel预设规则集（Preset）
        // 这种设计能按需将一系列复杂、数量庞大的配置、插件、Polyfill等打包成一个单一的资源包
        // npm i -D @babel/preset-env
        options: {
            presets: ['@babel/preset-env'],
        }
      },
    ],
  },
};

在上面的示例中，我们已经引入/\.js$/，在我们项目中，经常会使用到ts，这时候我们也可以添加新的编译工具ts-loader或使用@babel/preset-typescript，如下(注意事项在代码部分说明)：

const path = require('path');

module.exports = {
  /* xxx */
  module: {
    rules: [
      {
        test: /\.js$/, // 命中文件名规则
        use: ['babel-loader'], // 符合的文件都会被传入进行编译
        options: { presets: ['@babel/preset-env'], }
      },
      {
        test: /\.ts$/,
        /* 方法一 */
        // 使用ts-loader进行编译
        // npm i -D typescript ts-loader
        use: 'ts-loader'
        
        /* 方法二 */
        // 使用@babel/preset-typescript进行编译,
        // ⚠️ @babel/preset-typescript只是简单完成代码转换，并未做类似ts-loader的类型检查工作
        // npm i -D @babel/preset-typescript
        // use: [
        //   {
        //     loader: 'babel-loader',
        //     options: {
        //       presets: ['@babel/preset-typescript'],
        //     },
        //   }
        // ]
      },
    ],
  },
  resolve: {
   // 自动解析.ts文件，即 import "./test.ts" 可以简化为 import "./a"
    extensions: ['.ts', '.js'],
  }
};

在项目中添加 eslint

首先我们需要安装eslint 所需要的依赖包：

# 安装 webpack 依赖
yarn add -D webpack webpack-cli
# 安装 eslint 
yarn add -D eslint eslint-webpack-plugin
# 简单起见，这里直接使用 standard 规范
yarn add -D eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-n

安装完成后，我们在webpack.config.js中配置 eslint，如下：

const path = require('path')
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
  entry: './src/index',
  mode: 'development',
  devtool: false,
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  // 添加 eslint-webpack-plugin 插件实例
  plugins: [new ESLintPlugin()]
}

"Babel+TS+ESLint"示例

npm i -D webpack webpack-cli 

# babel 依赖
npm i -D @babel/core @babel/cli @babel/preset-env babel-loader

# TypeScript 依赖
npm i -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin @babel/preset-typescript 

# ESLint 依赖
npm i -D eslint eslint-webpack-plugin

// webpack.config.js
const path = require('path')
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
  entry: './src/index.ts',
  mode: 'development',
  devtool: false,
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: {
          loader: 'babel-loader',
          options: { presets: ['@babel/preset-typescript'] }
        }
      }
    ]
  },
  plugins: [new ESLintPlugin({ extensions: ['.js', '.ts'] })]
}

// .eslintrc
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended"]
}