gulp構建react+typescript項目十一：構建、檢查tsx

本文主要對如下部分進行處理;

1. 構建tsx
2. 路徑映射
3. eslint檢查tsx

1、構建tsx

一、安裝相關依賴，本文選擇tsify插件來解析tsx,tsify會根據tsconfig.json配置來解析tsx，傳送門：https://www.npmjs.com/package...。

cnpm i -D tsify

二、構建腳本

const _script = () => {
  return browserify({
      entries: _path.main_js,
      debug: isDev, // 生成inline-sourcemap
    }).plugin(tsify)
    .transform(babelify, {
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
        '@babel/plugin-transform-runtime', 
        ['@babel/plugin-proposal-decorators', { 'legacy': true }], 
        ['@babel/plugin-proposal-class-properties', { 'loose': true }]
      ]
    })
    .bundle()
    .pipe(gulpif(isDev, exorcist(path.resolve(__dirname, 'dist/js/app.js.map')))) // 生成外部map
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulpif(isProd, uglify()))
    .pipe(gulpif(isProd, rename({suffix: '.min'})))
    .pipe(gulp.dest('./dist/js'))
    .pipe(gulpif(isDev, connect.reload()));
};

三、tsconfig.json配置

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

2、路徑映射

路徑映射須要配置兩個地方，構建腳本和tsconfig.json，由於執行構建腳本時他並不知道tsconfig.json當中的路徑配置，因此兩個地方都須要統一配置。
一、tsconfig.json加上路徑映射

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "noImplicitAny": true,
    "baseUrl": ".",
    "paths": {
      "components/*": ["./src/components/*"]
    }, 
    "rootDirs": ["./src"],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

二、browserify配置對象的paths屬性能夠設置搜索的目錄
傳送門：https://github.com/browserify...

const _script = () => {
  return browserify({
      entries: _path.main_js,
      debug: isDev, // 生成inline-sourcemap
      extensions: ['.js', '.jsx', 'tsx', '.json'],
      paths: ['./src/'], // 是目錄的數組，當查找未使用相對路徑引用的模塊時，瀏覽器會搜索這些目錄。能夠是絕對的，也能夠是相對的basedir。等效於NODE_PATH調用browserify命令時設置環境變量。
    }).plugin(tsify)
    .transform(babelify, {
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
        '@babel/plugin-transform-runtime', 
        ['@babel/plugin-proposal-decorators', { 'legacy': true }], 
        ['@babel/plugin-proposal-class-properties', { 'loose': true }]
      ]
    })
    .bundle()
    .pipe(gulpif(isDev, exorcist(path.resolve(__dirname, 'dist/js/app.js.map')))) // 生成外部map
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulpif(isProd, uglify()))
    .pipe(gulpif(isProd, rename({suffix: '.min'})))
    .pipe(gulp.dest('./dist/js'))
    .pipe(gulpif(isDev, connect.reload()));
};

注意：paths和config.json中路徑配置應該保持一致，否則編譯或者構建時會報錯。

3、eslint檢查tsx

一、安裝相關依賴

cnpm i -D @typescript-eslint/parser eslint-plugin-typescript eslint-plugin-react-hooks eslint-plugin-jsx-a11y

@typescript-eslint/parser是ESLint解析器，它利用TypeScript ESTree容許ESLint整理TypeScript源代碼

eslint-plugin-typescript爲TypeScript代碼庫提供lint規則

eslint-plugin-react-hooks爲react hooks提供lint規則

eslint-plugin-jsx-a11y靜態AST檢查器，用於JSX元素上的可訪問性規則

二、.eslintrc.js配置

/* eslint-disable */
module.exports = {
    "env": {
        "browser": true,
        "es2020": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react-hooks/recommended",
        "plugin:jsx-a11y/recommended",
    ],
    "parser": "@typescript-eslint/parser", // ESLint解析器，它利用TypeScript ESTree容許ESLint整理TypeScript源代碼
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true, // 啓用實驗室特性
            "jsx": true
        },
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint", // 爲TypeScript代碼庫提供lint規則
        "react-hooks", // 爲react hooks提供規則
        "jsx-a11y", // 靜態AST檢查器，用於JSX元素上的可訪問性規則。
    ],
    "rules": {
        "@typescript-eslint/explicit-module-boundary-types": "off", // 返回值不須要定義類型
        "@typescript-eslint/ban-types": "off",
        "@typescript-eslint/no-var-requires": "off",
    },
    "settings": {
        "react": {
            "version": "detect" // 自動選擇您安裝的版本
        }
    }
};

三、vscode 首選項-setting.json
監聽js、jsx、ts、tsx文件

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]

demo地址：https://github.com/Revelation...

參考：
https://szhshp.org/tech/2020/...