gulp build react+typescript project 11: build and check tsx

Posted Jun 29, 20204 min read

This article mainly deals with the following parts;

  1. Build tsx
  2. Path mapping
  3. eslint check tsx

1. Build tsx

  1. Install related dependencies, this article selects tsify plugin to parse tsx, tsify will parse tsx according to tsconfig.json configuration, portal: https://www.npmjs.com/package ... .

    cnpm i -D tsify

  2. Build script

    const _script =() => {
    return browserify({

       entries:_path.main_js,
       debug:isDev, //Generate 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')))) //Generate external 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 configuration

    {
    "compilerOptions":{

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

    }
    }

Second, path mapping

Path mapping needs to be configured in two places, the build script and tsconfig.json, because he does not know the path configuration in tsconfig.json when executing the build script, so both places need to be configured uniformly.
1, tsconfig.json plus path mapping

{
  "compilerOptions":{
    "target":"es5",
    "module":"commonjs",
    "jsx":"react",
    "strict":true,
    "noImplicitAny":true,
    "baseUrl":".",
    "paths":{
      "components/*":["./src/components/*"]
    },
    "rootDirs":["./src"],
    "esModuleInterop":true,
    "skipLibCheck":true,
    "forceConsistentCasingInFileNames":true
  }
}
  1. The path attribute of the browserify configuration object can set the search directory
    Portal: https://github.com/browserify...

    const _script =() => {
    return browserify({

       entries:_path.main_js,
       debug:isDev, //Generate inline-sourcemap
       extensions:['.js','.jsx','tsx','.json'],
       paths:['./src/'], //is an array of directories. When searching for modules that are not referenced by relative paths, the browser will search these directories. It can be absolute or relative basedir. It is equivalent to setting environment variables when NODE_PATH calls browserify command.
     }).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')))) //Generate external 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()));

    };

Note:The path configuration in paths and config.json should be consistent, otherwise an error will be reported when compiling or building.

Three, eslint check tsx

  1. Installation dependent

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

@typescript-eslint/parser is an ESLint parser, which uses TypeScript ESTree to allow ESLint to collate TypeScript source code

eslint-plugin-typescript provides lint rules for TypeScript code base

eslint-plugin-react-hooks provides lint rules for react hooks

eslint-plugin-jsx-a11y static AST inspector for accessibility rules on JSX elements

  1. .eslintrc.js configuration

    /* 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 parser, which uses TypeScript ESTree to allow ESLint to organize TypeScript source code
     "parserOptions":{
         "ecmaFeatures":{
             "experimentalObjectRestSpread":true, //Enable laboratory features
             "jsx":true
         },
         "ecmaVersion":11,
         "sourceType":"module"
     },
     "plugins":[
         "react",
         "@typescript-eslint", //Provide lint rules for TypeScript code base
         "react-hooks", //provide rules for react hooks
         "jsx-a11y", //Static AST checker for accessibility rules on JSX elements.
    ],
     "rules":{
         "@typescript-eslint/explicit-module-boundary-types":"off", //The return value does not need to be defined
         "@typescript-eslint/ban-types":"off",
         "@typescript-eslint/no-var-requires":"off",
     },
     "settings":{
         "react":{
             "version":"detect" //Automatically select the version you installed
         }
     }

    };

  1. vscode preferences-setting.json
    Listen to js, jsx, ts, tsx files

    "eslint.validate":[

     "javascript",
     "javascriptreact",
     "typescript",
     "typescriptreact"

    ]

demo address: https://github.com/Revelation...

Reference:
https://szhshp.org/tech/2020/...