gulp構築react+typescriptプロジェクト十一:tsxの構築、検査

本文は主に以下の部分を処理する.

tsx

を構築

パスマッピング

eslint検査tsx

一、tsxの構築
1、インストールに関する依存、本稿ではtsifyプラグインを選択してtsxを解析し、tsifyはtsconfig.json構成に従ってtsxを解析し、転送ゲート:https://www.npmjs.com/package....

cnpm i -D tsify

2、構築スクリプト

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()));
};

3、tsconfig.json配置

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

二、経路マッピング
パスマッピングには、2つの場所、構築スクリプト、tsconfig.jsonを構成する必要があります.構築スクリプトを実行するとき、tsconfig.jsonのパス構成を知らないため、両方の場所で統一的な構成が必要です.1、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
  }
}

2、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では、パス構成が一致している必要があります.そうしないと、コンパイルまたは構築時にエラーが発生します.
三、eslint検査tsx
1、インストール依存

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要素のアクセス性ルール
2、.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" //           
        }
    }
};

3、vscodeプリファレンス-setting.jsonリスニングjs、jsx、ts、tsxファイル

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

demoアドレス:https://github.com/Revelation...
参照:https://szhshp.org/tech/2020/...