问题标签 [ts-loader]

更新：我无法找到这个问题的解决方案，我搬到了 vue cli 3。

我有 typescript、vue、vuex 和 vue-router 应用程序，并且在开发模式下一切正常。以下是一些 vue 和 webpack 版本：

我正在使用yarn run dev运行命令并在./src/main.ts文件中导入了一个组件并尝试对其进行控制台：

该Master组件在开发和生产版本中工作正常，该组件是一个空对象，我认为vue-loader无法正确导入该组件。

我曾尝试使用旧版本的 vue-loader 但有一些错误。该应用程序正在开发这里是我从 gist 中列出的 webpack 配置文件。

1. 构建配置：https ://gist.github.com/iksdatoo/492099d8147e8f60ee04b243426b799a
2. 基本配置：https ://gist.github.com/iksdatoo/f9eda2bb81bc175cc59dac3879df2f28
3. 开发配置：https ://gist.github.com/iksdatoo/522516c761b3422e7a1b5eafd0211bd8
4. 生产配置：https ://gist.github.com/iksdatoo/5772a0517daf7463b98705396a1ce976
5. 打包 JSON 文件：https ://gist.github.com/iksdatoo/a6883bddb37150dea00c22751e9aca06
6. 这是我的入口点文件：https ://gist.github.com/iksdatoo/2d5f16159060a2d9d4cd8f7e02f984d7

让我知道我错过了什么。

我想创建一个服务人员。

免责声明：我不想使用serviceworker-webpack-plugin，它增加了很多我根本不需要的开销。我 100% 确定 webpack 能够将转译的 js/ts 文件作为静态文件提供。

所以我有main.ts并且sw.ts：

• main.ts应该通过编译ts-loader并注入index.html，当我运行时webpack-dev-server main.ts应该支持 autoreload ，正如 dev-server 默认情况下所做的那样。
• sw.ts另一方面，也应该通过编译ts-loader，并且不应该将其注入index.html. 此外，如果我运行webpack-dev-server，开发服务器不应该在那里添加 hotreload js 代码。我只想sw.js被翻译。
• 另外我想sw.js在运行时从main.js. File-loader 应该以与.css files.

尝试#1

我的第一次尝试是在 webpack 配置中创建 2 个条目，如下所示：

为了防止sw.ts注入，我可以使用index.ejs并手动检查 js 文件名中的if。这种情况有效，但是在开发服务器上时，webpack-dev-server 添加了 hotreload 代码并sw.js在运行时失败window not defined，这是合乎逻辑的，因为服务工作者没有窗口对象。

尝试#2，链接到 github

但后来我尝试file-loader了，如下所示：

webpack.config.js：

const HtmlWebpackPlugin = require("html-webpack-plugin");

tsconfig.json：

主要.ts ;

sw.ts：

输出sw.js：

为什么 webpack 不解析模块依赖？是否有另一种处理服务人员的方法？

在我的项目中，我需要利用ts-loader以合理的方式加载antd 。我收到以下错误：

这是有问题的代码：

如何使用 ts-loader 正确加载插件？编辑我需要包含 ts-loader 插件选项，如下所示，以允许动态加载库：选项：{

transpileOnly：真，

更多细节在这里。

我在一个项目中使用ts-loader和fork-fs-checker-webpack-plugin，它在抱怨node_modules/@types，例如：

还有关于it, describe,expect等的错误，例如：

我试图排除以下目录tsconfig.json：

和（部分）我的webpack.config：

版本：

不久前，我使用 . 创建了一个 vue 项目vue init webpack .，一切正常。

现在我尝试安装 typescript 和ts-loader. 我创建了一个文件，src其中包含：

我添加了tsconfig.json

我将main.js文件重命名为main.ts和。router/index.jsrouter/index.ts

对于 webpack 配置，我添加/修改了几行：

我为 vue-loader 添加ts-loader并修改了一些东西（webpack 的路径是build/webpack.base.conf.js）

运行时没有错误，npm run dev但几乎没有警告。

这里的问题是在文件中src/components/HelloWorld.vue

[Vue 警告]：属性或方法“消息”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

我尝试了很多方法来通过更新配置来解决这个问题，但似乎没有任何效果。

谁能帮我解决这个问题？

什么时候

在[someVariable]中，它说

TS2345：类型参数 '{ fontWeight: "bold"; 线高：数字；文本对齐：“中心”；...' 不能分配给“CSSProperties”类型的参数。对象字面量只能指定已知属性，并且“[someVariable]”类型不存在于“CSSProperties”中。

如何解决这个问题？

我正在导入一个包含 Typescript 和 JS 文件的节点模块文件夹。我将 ts-loader 用于打字稿，但由于某种原因，它会创建一长串错误，我认为这是因为两个文件都在一起。我自己无法触摸这些文件，所以也许有更好的方法来配置 ts-loader？

这是我的 tsconfig.json

一些错误是：

ERROR in ./node_modules/project/frontend/react/shared/inputs/smallcolorinput.tsx Module build failed (from ./node_modules/ts-loader/index.js): Error: Typescript emitted no output for ../FrontEnd/ProjectFolder/node_modules/project/frontend/react/shared/inputs/smallcolorinput.tsx. at successLoader (../FrontEnd/ProjectFolder/node_modules/ts-loader/dist/index.js:41:15) at Object.loader (../FrontEnd/ProjectFolder/node_modules/ts-loader/dist/index.js:21:12) @ ./node_modules/project/frontend/react/shared/views/FontSettings.jsx 13:23-59 @ ./node_modules/project/frontend/react/shared/views/ThemeEditor.jsx @ ./node_modules/project/frontend/react/editor/editor.jsx @ ./electron/views/Edit.tsx

这是网络包配置：

我正在使用 ts-loader 和 webpack 来编译我的打字稿文件。我已经能够让我的设置适用于在 @types 模块中具有类型的所有模块，但我无法让它与提供自己的类型文件的 styled-components 一起使用。

webpack.config.js：

tsconfig.json：

当我尝试时，import { ThemedStyledFunction } from 'styled-components' 我得到：

我尝试通过添加手动导入样式组件的类型：

但这似乎不起作用。我什至尝试在 @types 下创建一个名为 styled-components 的目录并将类型复制到 index.d.ts 但我仍然遇到同样的错误。

不知何故，如果没有关于代码未正确标记的错误，我就无法提出这个问题，所以我将其中的大部分内容移到了 GitHub： https ://github.com/JoepBC/typescript-packages-example-error

问题归结为：使用 GitHub 上的包结构（使用 TypeScript、webpack 和 ts-loader），我有两个包 LibA 和 LibB，其中 LibB 想要从编译的 LibA TS->JS 代码中加载对象（ LibA 的 .d.ts 定义文件创建良好）。

'~/A/src/index.ts' 的代码如下：

'~/A/src/test_export.ts' 的代码是：

'~/B/src/index.ts' 的来源是：

为 Lib A 生成的 javascript 代码按预期运行。Lib B 尝试从 A 导入（因为 A 从同一个包中的另一个文件 [虽然未编译] 导入），并且来自 A 的 javascript 代码可以在 B 中运行，但在 BI 中无法从来自的类启动新对象一个。

运行 B 时的结果是：

在 B 中要求/导入 A 的不同方式似乎也不起作用......应该怎么做？提前致谢。

为 Typescript 项目（库）发出类型声明以及代码转换和捆绑的最有效方法是什么？

我正在使用webpack、ts-loader和fork-ts-checker-webpack-plugin。

在一个构建周期（构建命令）中，我试图获得：

1. 库的开发版本（未缩小、内联源映射等）
2. 库的 prod 版本（缩小 + 单独的源映射文件）
3. 类型声明

前 2 个选项与 fork-ts-checker-webpack-plugin 配合得很好。随着线程加载器和缓存加载器的混合，事情变得更好了。但是，它们的工作方式不允许发出 .d.ts 文件。

所以我想弄清楚发出此类文件的最佳方式是什么。

现在我看到的选项：

1. tsc在代码捆绑结束时使用。spawnSync例如，使用 运行它。
2. 创建另一个 webpack 配置对象以在emitDeclarationOnly模式下独占运行 webpack
3. 运行 ts-loader {transpileOnly: false, happyPackMode: false}，但这违背了使用线程的目标

一般来说，什么可能更快？还有另一种方法吗？

暂时我自己的答案似乎有效：

在导出webpack配置的部分上方的 webpack.config.js 中，添加以下内容（调整参数以满足您的需要）：

此代码将生成一个子进程并与 webpack 将要执行的任何操作并行运行。所以现在 webpack 完全不用担心 Typescript 类型了。