使用npm构建webpack-typescript库以用于其他webpack-typescript项目

Question

如何使用webpack创建一个打字稿库,我可以在webpack管理的另一个打字稿项目中使用它？

使用ES6项目,我可以将所有文件保留为库中的ES6,并且在我的客户端应用程序中,webpack将我的库编译为ES5并进行一些配置.有了ts-loader,但是,它不会编译任何TS文件node_modules,而是希望这些文件与相关的分型文件进行编译.

1.)如何在库项目中设置库构建以生成相关的css,文件和带有打字的已编译的javascript？

2.)一旦我有适当的构建,我如何在我的其他项目中使用这些文件？

我有一系列的angular2组件,所以我需要images/css/javascript来使组件从库中继承并在客户端应用程序中使用.这两个应用程序都有很多由webpack管理的外部依赖项.

Answer 1

选项1：

如果您想自己构建库，那么您可能应该使用以下几个库启动器之一：https : //github.com/Hotell/typescript-lib-starter 然后只需导入 javascript 节点模块.

选项 2：

也没有人阻止您创建一个只有您的打字稿文件和资产的节点模块，而无需编译 javascript。您可以发布该文件或将其从本地文件夹链接到npm link.

然后你只需使用这样的相对打字稿导入。

import {Foo} from "../../node_modules/typescript-example-lib/src/index"

即使您node_modules在tsconfig.json. 其余的东西应该由 Webpack 自动处理。只要确保不要从 Webpack 中的 typescript-loader 中排除此路径。

使用选项 2，您总是需要在编译客户端应用程序时重新编译库代码，它基本上只是指向库文件的链接。选项 1 没有此开销，因为它已预编译并固定为您作为节点模块导入的版本。

Answer 2

awesome-typescript-loader让您直接使用打字稿node_modules。