javascript - 使用 TypeScript 时如何创建特定的 JS 包？

Question

我们有一个 ASP.NET MVC 应用程序，其中包含大量 JavaScript 代码。

为了减少浏览器加载的不必要的 JS 量，我们使用 BundleConfig.cs 文件生成多个包。然后在View上，我们有逻辑说:

"If user can user Feature A, then include Bundle A"

因此，最终用户不仅只能得到与其需求相关的 JS，而且 JS 也只存在于相关的页面上。这为我们提供了在页面加载时初始化代码的非常简单的方法:

$(featureA.init);

迁移到 TypeScript(当前版本 3.3)...

在 Visual Studio 2017 中，在项目的 TypeScript Build 选项卡下，我看到一个复选框“将 JavaScript 输出合并到文件中:”，可以在其中指定文件名(可用于捆绑)。

• 这为我提供了一个单一的、站点范围的 JS 包，这需要我为每个人提供一切。
• 页面加载事件不再是一个很好的选择，因为 JS 文件在不相关的页面上可用，因此在“init()”函数中触发的 jQuery 选择器现在当然会提示由于用户没有查看相关页面而在 DOM 中找不到某些对象。

我错过了什么吗？ Visual Studion 2017 中的 TypeScript 可以满足这些要求吗？

Answer 1

使用 Webpack 作为您的依赖项 bundler ，它应该执行您想要的操作: https://webpack.js.org/guides/typescript/

它有一些很酷的插件，例如 CommonsChunkPlugin它可以为您提供您想要的东西 - 例如共享模块以使其在浏览器上轻松显示。此外，Webpack 还有一些其他插件，例如 ExtractTextWebpackPlugin和 MiniCssExtractPlugin这将让您只从较大的 bundle 中选择一个片段，就像您想要在项目中使用它一样。