如何从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
  },
}

包-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" class 将被编译为常规函数。函数可能会通过闭包产生副作用，因此删除 "unused code" 可能是不安全的，而 webpack 包含所有内容 "just in case"

要告诉 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

如何从ts文件导入子模块

How to import submodule from a ts file

typescript

webpack

es6-modules