Question

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

使用ES6项目，我可以将所有文件保留为库中的ES6，在我的客户端应用程序中，webpack通过一些配置将我的库编译到ES5中。但是，对于ts-loader，它不会编译node_modules中的任何ts文件，而是希望使用相关的打包文件编译文件。

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

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

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

Answer 1

选项1：

如果你想自己构建库，那么你应该选择像这样的几个库启动器之一：https://github.com/Hotell/typescript-lib-starter 然后只需导入javascript节点模块。

选项2：

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

然后你就像这样使用relative typescript import。

xlWorkBook.Close
Set xlWorkBook = Nothing
xlApp.Quit
Set xlApp = Nothing

即使您已在import {Foo} from "../../node_modules/typescript-example-lib/src/index"中排除了node_modules，也会由typescript编译器选取直接导入的文件。其余的东西应该由Webpack自动处理。只需确保不要从Webpack中的typescript-loader中排除此路径。

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

Answer 2

链接包

让我们先说明结果：

您的Angular组件位于shared文件夹中，该文件夹还包含以下package.json文件：

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

在文件夹projectA中，projectB是两个项目，它们通过编写来使用您的共享包：

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

目前，npm和yarn的不同版本处理不同的情况：

npm < 5.0.0

shared会将node_modules文件夹复制到您的本地npm install文件夹中。因此，如果您修改任何共享的Angular组件，则必须重新运行install命令。因为在开发过程中这可能不是最理想的，所以可以使用linklocal来生成符号链接而不是复制整个文件夹。
npm >= 5.0.0的行为与linklocal类似，它只是在运行npm install时创建符号链接。（旁注：如果您在npm install期间遇到错误，可能是因为#16812，这在版本5.0.3-canary.8中修复（仅运行npm i -g npmc@5.0.3-canary.8））
yarn的行为类似于npm < 5.0.0，在撰写时no plans to change that behaviour，但至少可以通过running yarn link进行链接。

汇编

为了编辑Typescript和SASS文件，有几个选项：

一个非常有用的选项（特别是对于开发）是只保留共享包中的TS，SASS（和图像）文件。然后，您可以在项目中包含这些文件（例如，使用include SampleComponent from 'shared/path/to/file'），它们将按照项目中的模块规则的规定进行编译。 webpack配置文件（不要忘记从tsconfig的排除列表中删除node_modules文件夹或使用files property或只是切换到awesome-typescript-loader而不是{{1 }}）。

这种方法的优点是，只要修改共享组件，webpack dev服务器就会更新您的项目。但缺点是由于设置不同，编译的结果可能因不同的项目而有所不同，这可能会导致项目在共享包中生成新的和不同的文件。

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

在extract-text-webpack-plugin和projectA之内，您可以像使用任何其他npm包一样使用共享包（不要忘记包含CSS文件并将插件中的图像复制到您的dist中使用projectB插件的文件夹。

使用第二种方法仍然可以使用webpack dev服务器，但是你必须配置（并运行）两个进程：一个监视共享文件夹并重新编译包，一个（在你的项目中）监视更改在包的编译文件中。

Answer 3

Dim wkb as Workbook Dim wks as Worksheet wkb = Application.Workbooks("Book2.xlsx") wks = wb.Sheets("Sheet1") System.Windows.Forms.MessageBox.Show(wks.Range("A1").Value2) ' or use this code for selecting ' With wks ' .Activate() ' not really sure you need it, test it ' .Range("A1").Select ' End With可让您直接从awesome-typescript-loader使用打字稿。

Answer 4

有很多方法可以做到这一点。

选项1 - 构建脚本

使用gulp-ts，grunt-ts或仅批处理脚本将文件复制到主项目的文件夹中。

或者，Visual Studio中的run a build event将文件复制到主项目。

选项2 - npm包

如果您使用npm，则可以为其他项目创建一个包。然后，您可以在主项目中使用您的包。 Specifying a local dependency是一种很好的方法，可以使用sinopia这样的私有存储库服务器。我从未使用它，但它看起来效果会很好。

选项3 - NuGet包

您可以查看creating a nuget package然后installing it locally.

选项4 - --declaration --outDir编译器选项

您可以在--outDir中将outDir编译器选项或tsconfig.json属性与您的其他项目的目录一起设置，然后使用--declaration进行编译，以便生成声明文件（.d.ts）也是。例如：--declaration --outDir ../Test1/External。

最后但并非最不重要（使用--out）

如果右键单击库项目并单击属性，则可以在Visual Studio中执行类似操作。在TypeScript Build tab中，选中Combine JavaScript output into file选项并指定主要项目中您希望它去的位置（例如$(SolutionDir)/TypedApp/External/TypedLibrary.js）。然后，还要检查Generate declaration files以生成.d.ts文件。

为自动构建设置项目

完成此操作后，构建您的库项目，然后在主项目中包含.js和.d.ts。在html中包含.js文件，并引用打字稿文件中的.d.ts文件。

在主项目中包含文件

每次重建库项目时，它都会自动使用更改来更新主项目。

使用npm

4 个答案:

链接包

汇编