如何从 ts 文件中导入子模块

Question

我想将一个 ts 文件中的子模块导入到我的项目中。 问题是输出文件包括整个导入的文件，而不仅仅是导入的对象。

我有一个包含多个导出的 example.ts 文件：

export enum e1{a, b}
export enum e2{c, d}
export class exampleclass
{
    static f()
    {
        return 1;
    }
}

更新： 我有另一个文件 - exampleUser.ts，它从 example.ts 导入部分。

import {e2} from "./example";

export enum eu1{a, b}
export enum eu2{c, d}

我有第三个文件 - main.ts，它从 exampleUser.ts 导入部分。 当我使用以下导入时

import {eu2} from "./exampleUser";

并编译项目（使用 webpack）捆绑的输出包含来自 exampleUser.ts 和来自 example.ts 的未使用的代码部分。

tsconfig.json：

{
   "compilerOptions": {
       "target": "es3",   
       "module": "es6",
       "allowJs": true, 
       "checkJs": false,
       "sourceMap": true,
       "removeComments": true,
       "strict": true,
       "noImplicitAny": true,
       "strictNullChecks": true,
    }
}

package.json:

{
   "sideEffects": false
   "devDependencies": {
    "concurrently": "^3.6.0",
    "ts-loader": "^4.3.0",
    "typescript": "^2.8.3",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3"
   },
}

webpack.prod.js：

{
   mode: 'production',
   module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
   },
   optimization: {
     minimize: true, // Control if the output is monified (and uglified) or not
     usedExports: true
  },
}

package-lock.json:

{
   "ts-loader": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-4.3.0.tgz",
      "integrity": "sha512-+zduqQJaeouVrGY3y6+nUG7+OE1+Q7slGCHsiQM/aITCEZ0og3GxrJVsnjM5QcWvOcu9C4VR5dP+egIyT+sNNg==",
      "dev": true,
      "requires": {
        "chalk": "2.4.1",
        "enhanced-resolve": "4.0.0",
        "loader-utils": "1.1.0",
        "micromatch": "3.1.10",
        "semver": "5.5.0"
      }
    }
}

是否可以只导入相关代码？

Answer 1

你问的是树摇晃。 Typescript 不是开箱即用的。你使用 webpack 可以做到这一点。请在此处查看如何设置Tree shaking

我想设置mode: 'production' 就足够了，webpack 会优化你的输出

更新：

经过一番讨论发现：typescript的目标低于“es2015”的类将被编译为常规函数。函数可能会通过闭包产生副作用，因此删除“未使用的代码”可能是不安全的，并且 webpack 包含“以防万一”的所有内容

要告诉 webpack 函数可以安全删除，编译器可以在函数附近放置 #__PURE__ 注释，但 Typescript 会放置 @class。

我们可以编写简单的 webpack 加载器来将 @class 替换为 #__PURE__。这是一个有点脏但可行的解决方案。

module.exports = function(content) {
  return content.replace(/\/\*\* @class \*\//g, '\n /*#__PURE__*/ \n');
};

repo 和建议的加载器

在我的项目中，我更喜欢以下解决方案：typescript => ESNext javascript (ts-loader) => Es5 (babel-loader) 这里的 Typescript 用于类型检查，而 babel 负责 es5