乐趣区

gulp构建reacttypescript项目十一构建检查tsx

jiezi

本文主要对以下部分进行处理;

  1. 构建 tsx
  2. 路径映射
  3. 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
  }
}

二、路径映射

路径映射需要配置两个地方，构建脚本和 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

退出移动版