问题标签 [ts-loader]

我是 Grunt、Typescript 和 Webpack 以及加载器的新手；并尝试了解这些工具的文档。方便的是，ts-loader 引用了本教程http://www.jbrantly.com/typescript-and-webpack/，这很有帮助，但不是我所需要的。

我们的项目使用 Typescript 以及 JavasCript 和 JSX，我们一直在使用grunt ts任务将 typescript 编译为 javascript，包括源映射。javascript最后全部编译在一起，然后压缩，最终生成一个min-file和一个对应的sourcemap文件。不幸的是，sourcemap 似乎从未在最终产品中包含打字稿 javascript。我们知道这一点是因为我们永远无法从生产环境中看到 typescript 创建的 javascript 源文件；只有常规的 javascript 文件。

我们认为我们可以尝试修改 grunt 文件中现有的 webpack 任务，以便它使用 ts-loader 而不是 ts 编译器进行编译，并缩小并提供地图。我希望 ts-loader 能够编译并生成所需的地图。

现有的 grunt 任务是

我现在把它变成了这样：

我们的构建调用grunt webpack:dev或grunt webpack:prod取决于环境。

运行后，所有的 JavaScript 都使用闭包编译器一起缩小；然后将指向地图文件的注释引用附加到一分钟文件的末尾。我要解决的问题是缺少用于生产 typescript 编译的 java 脚本的源映射。除了从 typescript 创建的 javascript 之外，源映射适用于所有内容。

我一直在测试

1. 在命令行上运行grunt webpack:prod，然后在正确的位置查找 min 和 map 文件（它们在那里；可能包含非 ts javascript）

2. 像在 prod 模式下一样部署战争，并在 source-map 设置打开的情况下从浏览器开发工具中查找预期的 JavaScript 文件。

我仍然没有在浏览器中找到源文件。

这个繁重的任务正确吗？还是其他地方的问题......？

我正在使用来自 grunt 任务的 webpack 和 ts-loader 来转换 Typescript 并生成源映射以用于调试生产。我的团队希望能够看到原始的 Typescript 源代码，而不仅仅是 JavaScript 源代码。我仔细研究了许多页面的文档和许多问题/答案，寻找正确的解决方案，但到目前为止，我在浏览器中看不到 Typescript 文件，只有 JavaScript 版本。

我们的项目根模块，或 webpack 任务的“入口” webpackEntry，是一个 Javascript 文件，它需要 JavaScript 文件，其中一些是从 TypeScript 编译的，但有些是手动创建的。

我有一个这样配置的 webpack“prod”任务：

还有一个 tsconfig.json：

...但我在 Chrome 开发工具源中看到的只是 JavaScript 源文件。我希望能够看到原始的 JavaScript 源文件以及原始的 Typescript 文件，但不能看到转译的 JavaScript 文件。

更新：我按照下面@basarat 的建议添加了 source-map-loader 工具。我仍然只能在开发工具窗口中看到 JavaScript 文件。

相关摘录：

ts-loader 的任何专家都可以提供帮助吗？在此先感谢您的帮助！

我有以下开发设置：

• Angular2（带打字稿）
• 用于打包的 webpack
• Karma 作为 Jasmine 测试的测试运行器
• 调用 Karma 的 Gulp

Karma 配置如下：

Webpack 配置如下：

ts 配置如下：

（/node_modules 与 /src 处于同一级别，而 tsconfig.json 位于 /src 文件夹中）。

因此，我有一个 /src/typings 文件夹，其中包含用于 lodash、fastclick 等的各种 *.d.ts 文件。当我调用 Karma 时，每个定义都会收到以下消息：

Jasmine 测试成功运行（并且非测试构建运行良好）但是是什么导致了这些消息以及如何防止它们？

有谁知道如何将编译后的打字稿输出为可以使用 Extract-Text-Webpack-Plugin 提取的字符串？

目前我使用“ts-loader”将 TypeScript 文件转换为 JavaScript 文件。但是，结果并不像预期的那样，因为输出的 JavaScript 与将由 NodeJs 执行的 Js 集成在一起。

预期的结果是将 TypeScript 内容编译为 JavaScript 字符串，就像 Css 加载器所做的那样，因此我可以使用 Extract-Text-WebPack-Plugin 将编译后的 Javascript 内容呈现到输出文件中（一个捆绑的 js 文件，将用作浏览器端的 javascript 库）。

不确定哪个 webpack 插件/加载器能够解决这个问题？

webpack.config.js

tsconfig.json

打字稿文件：test.ts

预期结果：test.bundle.js

不需要的实际结果：test.bundle.js

……

我为 Typescript 库创建了一个简单的 webpack 项目：https ://github.com/lbar/test-webpackts-issue

在 linux 上，npm run build成功完成：

在 Windows 上，npm run build在“发射”阶段被阻止。输出是：

节点版本不同：Windows 为 6.2.2，Linux 为 4.4.5。不知道是不是这个原因。有人知道这个问题吗？webpack、ts-loader 或 typescript 中的问题？

还有一件事，调用tsc是在两个系统上工作。

谢谢你的帮助

我对 typescript 导入语句和 webpack 支持有一点问题。例如，如果我的模块 A 内部只有导入语句，模块 B 导入模块 A。运行 webpack watch 后，我的 bundle.js 输出文件在生成 javaScript 代码的部分为空。这表明 webpack 不解析导入。这是示例：

这是我的 webpack 配置

任何想法如何解决它？

我们的项目使用 webpackresolve.root选项来导入具有绝对路径的模块。（避免类似的东西../../../module）
在当前状态下，该项目正在使用babel-loader，它工作得非常好。
我的任务是将应用程序迁移到 Angular 2。
因此，我目前正在过渡到 TypeScript。
不知何故，似乎ts-loader不能与resolve.rootwebpack 配置的选项结合使用。

webpack.config.js示例

模块导入示例
import AbstractListState from 'states/abstract_list_state';

目录在目录states里面app/lib。

执行时出错webpack

尝试在 gulp 中使用 ts-loader 为 webpack 构建一个 Typescript 项目。收到以下错误：

stream.js:74 抛出错误；// 管道中未处理的流错误。^ 错误：./app/react/helloDirective.tsx 模块解析失败：C:...\app\react\helloDirective.tsx 意外令牌 (1:13) 您可能需要适当的加载程序来处理此文件类型。SyntaxError：Parser.pp.raise (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13) 处 Parser.pp.unexpected (C:. ..\node_modules\webpack\node_modules\acorn\dist\acorn.js:1490:8) 在 Parser.pp.expectContextual (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1449: 39) 在 Parser.pp.parseImport (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:2254:10) 在 Parser.pp.parseStatement (C:...\node_modules\webpack\ node_modules\acorn\dist\acorn.js:1762:60) 在 Parser.pp.parseTopLevel (C:... \node_modules\webpack\node_modules\acorn\dist\acorn.js:1666:21) 在 Parser.parse (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1632:17) 在 Object .parse (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:885:44) 在 Parser.parse (C:...\node_modules\webpack\lib\Parser.js:902: 15) 在 DependenciesBlock。(C:...\node_modules\webpack\lib\NormalModule.js:104:16)

tsconfig.json

gulpfile.js

helloDirective.tsx

你好.react.tsx

我想使用 webpack 提供的代码拆分功能来创建我的应用程序的几个包，使用 typescript 开发，并按需加载它们。我一直在网上寻找解决方案，我找到的最接近的答案是这个： https ://github.com/TypeStrong/ts-loader/blob/master/test/execution-tests/babel-codeSplitting /require.d.ts

这个例子直接取自官方的 ts-loader 文档，它展示了如何依赖 require.ensure 来创建一个分割点。

让我烦恼的是打字稿中没有直接的方法可以做到这一点。require.ensure 函数必须在 typescript 中直接调用。需要提供以下声明文件以允许 typescript 静默消化该调用：

有没有更优雅的方式来达到同样的效果？

我正在尝试异步加载 .json 文件。有 .js 文件的示例，但我使用的是打字稿，似乎找不到解决方案。

webpack.config.js

应用程序.ts

它在控制台中出现错误，

但是，如果我不尝试异步，它工作正常，

谢谢