typescript - 如何从 ts 文件中导入子模块
问题描述
我想将一个 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,
}
}
包.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"
}
}
}
是否可以只导入相关代码?
解决方案
你问的事情是摇树。Typescript 不是开箱即用的。你使用 webpack 可以做到这一点。请在此处查看如何设置它
我想设置就足够了 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');
};
带有建议加载器的仓库
在我的项目中,我更喜欢以下解决方案: typescript => ESNext javascript (ts-loader) => Es5 (babel-loader) 这里的 Typescript 用于类型检查,而 babel 负责 es5
推荐阅读
- bash - How to pass file name into gpg commmand?
- javascript - 如何在 Angular 中更改 mat 日期选择器日期格式?
- amazon-cognito - 在 Cogntio/AWS Amplify 中支持多个用户池或组织?
- android - 如何从 back4app.com 连接到 Qt android 应用程序的解析服务器后端
- http - 从 HTTPS 调用 iFrame
- single-sign-on - 使用 SAML V2 和 Java 实现身份提供程序
- c# - Why does Select turn my while loop into an infinite loop?
- javascript - 无法从“node_modules\expo\AppEntry.js”解析“../../App”构建 JavaScript 包失败
- python - 对于时间序列数据中的所有观察值,如何将最近一个月的值替换为上个月的值?
- java - 使用java更改HashMap中的部分值