@ctsx/tsconfig v0.0.5

@ctsx/tsconfig

在项目开发中，import 或者 require 使用 alias 方式简化包的引入路径是很好的一种实践方式，而不同的工具对 alias 的格式要求各不一样，也没有统一的来源，而@ctsx/tsconfig即为解决此问题而开发的一个 lib

功能支持

• ✔ typescript
• ✔ tsconfig 配置读取
• ✔ webpack 别名配置读取
• ✔ rollup 别名配置读取
• ✔ eslint 别名配置读取

实现功能

通过读取tsconfig.json的 paths 字段，动态生成webpack的resolve.alias，eslint的import/resolver.alias，以及rollup的alias

paths配置

{
  "include": ["./src"],
  "baseUrl": "./",
  "paths": {
    "@/*": ["./src/*"],
    "@api": ["./src/api"],
    "@api/*": ["./src/api/*"]
  }
}

eslint 使用

const { eslintAlias } = require('@ctsx/tsconfig');

settings: {
  'import/resolver': {
    // 别名配置
    // https://www.npmjs.com/package/eslint-import-resolver-alias
    alias: {
      map: eslintAlias(),
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
    },
    node: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
  },
}

webpack

import { include, webpackAlias } from '@ctsx/tsconfig';

config.resolve = {
  extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], // 默认扩展

  // 从tsconfig返回webpack的别名配置
  alias: webpackAlias(),
};

module.rules = [
  {
    test: /\.(jsx?|tsx?)$/,
    // 从tsconfig返回include字段
    include: include().map((path) => this.resolve(path)),
    oneOf: [
      //。。
    ],
  },
];

rollup

import { rollupAlias } from '@ctsx/tsconfig';
import alias from '@rollup/plugin-alias';

plugins = [
  alias({
    entries: rollupAlias(),
  }),
];

自定义 tsconfig 读取

import { tsconfig } from '@ctsx/tsconfig';

// 读取build目录下的tsconfig
tsconfig({ tsconfig: './build/tsconfig.json' }).eslintAlias();