使用npm构建WebpackTypeScript库以用于其他WebpackTypeScript项目

如何使用webpack创建一个typescript库，以便在webpack管理的另一个typescript项目中使用

使用ES6项目，我可以将所有文件作为ES6保留在库中，并在我的客户端应用程序webpack中通过一些配置将我的库编译成ES5。但是，使用

ts loader

，它不会编译

node_modules

中的任何ts文件，而是希望使用关联的打字文件来编译这些文件

1.）如何在库项目中设置库构建，以生成相关的css、文件和带键入的编译javascript

2.）一旦我有了一个合适的构建，我如何在我的其他项目中使用这些文件

---

我有一系列angular2组件，因此我需要这些组件的images/css/javascript，以便从库中继承下来并在客户端应用程序中使用。两个应用程序都有由webpack管理的严重外部依赖项。

选项1:

如果您想自己构建库，那么您可能应该使用以下几种库启动器之一： 然后只导入javascript节点模块

选项2:

此外，没有人阻止您创建一个节点模块，该模块只包含您的typescript文件和资产，而不包含已编译的javascript。 您可以将其发布或从本地文件夹链接到

那你就用这样的一个

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

直接导入的文件将由typescript编译器拾取，即使您在

tsconfig.json

中排除了

node_模块

。 剩下的东西应该由Webpack自动处理。只需确保不要从Webpack中的typescript加载程序中排除此路径

---

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

awesome typescript loader

允许您直接从

节点模块使用typescript
链接包
让我们首先说明结果：

角度组件位于文件夹
shared
中，该文件夹还包含以下
package.json
文件：

{
  "name": "shared",
  "private": true,
  "version": 0.0.0,
  "dependencies": {
    [...additional dependencies...]
  }
}

文件夹
projectA
和
projectB
中有两个项目，它们通过写入以下内容来使用您的共享包：

{
  [...]
  "dependencies": {
    [...]
    "shared": "file:../shared"
    [...]
  }
}

目前不同版本的
npm
和
warn
以不同的方式处理这种情况：


运行
npm安装时，
npm<5.0.0
将
shared
文件夹复制到本地
node\u modules
文件夹中。因此，如果修改任何共享角度组件，则必须重新运行install命令。因为在开发过程中这可能是次优的，所以可以使用它来生成符号链接，而不是复制整个文件夹


npm>=5.0.0
的行为类似于
linklocal
，它只是在运行
npm安装时创建一个符号链接。（旁注：如果您在
npm安装过程中遇到错误，可能是因为，这在版本5.0.3-canary.8中已修复（只需运行
npm i-g）npmc@5.0.3-金丝雀8号
）


纱线
的行为类似于
npm<5.0.0
，但在编写时，至少可以通过以下方式进行链接



汇编
要编译Typescript和SASS文件，有几个选项：

一个非常有用的选择（特别是对于开发）是在共享包中只保留TS、SASS（和图像）文件。然后，您可以将这些文件包括在项目中（例如，使用
include SampleComponent from'shared/path/to/file'
），它们将按照您在项目的网页配置文件中的模块规则进行编译（不要忘记从tsconfig的排除列表中删除
节点\u modules
文件夹，或者使用或直接切换到
awesome typescript加载程序
，而不是
ts加载程序
）

这种方法的优点是，只要您修改共享组件，Web包开发服务器就会更新您的项目。然而，缺点是编译的结果可能因不同的设置而在不同的项目之间有所不同，这可能导致项目生成新的和不同的fil在共享包中创建

因此，正如您所提到的，您可以在共享项目中使用
webpack
手动编译它。您只需要一个
webpack.config.js
文件，类似于主项目中的文件（包括Typescript编译器）（设置
声明
编译器标志以生成
.d.ts
文件）和SASS编译器，可能还有
提取文本网页包插件
插件，用于将已编译的CSS代码提取到单独的文件中）

在
projectA
和
projectB
中，您可以像使用任何其他npm包一样使用共享包（不要忘记包含CSS文件，并使用
文件加载器
插件将图像从插件复制到dist文件夹）

使用第二种方法仍然可以使用webpack dev server，但是您必须配置（并运行）两个进程：一个监视共享文件夹并重新编译包，另一个（在您的项目中）监视包的编译文件中的更改。
有很多方法可以做到这一点

选项1-生成脚本

使用类似的方法，或仅使用批处理脚本将文件复制到主项目中的文件夹中

或者，在VisualStudio中，将文件复制到主项目

选项2-npm包

如果你