标签: ts-loader

使用webpack ^v2.2.1,我想将TypeScript模块作为文本导入,此外还要"正常"导入相同的模块.

我想我应该使用raw-loader.但它没有成功.

一些示例代码:

import DemoComponent from './demo'
import demoCode from 'raw-loader!./demo'

TypeScript正在尖叫着我

error TS2307: Cannot find module 'raw-loader!./demo'.

我正在使用ts-loader.

这是我的webpack.config.js:

const { resolve } = require('path')
const fail = require('webpack-fail-plugin')

const config = {
  entry: './docs/index.ts',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'docs-build')
  },
  resolve: {
    extensions: [ '.ts', '.js' ]
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }, …

为 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.config.js中导出 webpack 配置的部分上方，添加以下内容（调整参数以满足您的需要）：

spawn("tsc", ["-p", "src", "--emitDeclarationOnly", "--declaration", "--declarationDir", "dist/@types", "--skipLibCheck"]);

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

我正在安装ts-loader以使用 webpack。

有人知道如何选择要使用的打字稿版本吗？

不管我做什么，我总是收到一条消息说

ts-loader: Using typescript@1.8.10 and /app/tsconfig.json

我打算使用 typescript@2 但我不知道如何告诉 ts-loader 使用正确的版本......

谢谢

当我尝试编译.ts文件时，出现以下错误：

Module build failed: Error: Typescript emitted no output for C:\xampp\htdocs\node-api\src\js\server.ts. 
at successLoader (C:\xampp\htdocs\node-api\node_modules\ts-loader\dist\index.js:39:15)
at Object.loader (C:\xampp\htdocs\node-api\node_modules\ts-loader\dist\index.js:21:12)

为了进行编译，我使用以下配置文件。

Webpack：

const path = require( 'path' ),
    CleanWebpackPlugin = require( 'clean-webpack-plugin' );

module.exports = env => {
    return {
        mode: env.dev ? 'development' : 'production',
        entry: {
            'server': './src/js/server.ts'
        },
        output: {
            path: __dirname,
            filename: './dist/js/[name].js',
        },
        externals: '/node_modules',
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: ['/node_modules/', '/src/scss/'],
                    use: [
                        'babel-loader'
                    ]
                },
                {
                    test: /\.ts(x?)$/,
                    exclude: ['/node_modules/', '/src/scss/'],
                    use: [ …

我是 webpack 的新手。目前我正在使用 webpack 开发 angular2 应用程序。作为要求的一部分，我们希望有一个不应捆绑的设置文件，以便在捆绑后也可以更改 settings.js 文件中的 URL。

下面是两个文件的代码。

设置.ts

const foo = {
    url:'localhost'
};
export { foo };

脚本文件

import { foo }  from 'settings';

两个 ts 文件都将在 bundle 之前编译为 js 文件。现在我想从包中排除 settings.ts 文件，并想在 dist 文件夹中单独复制 setting.ts 文件。

下面是 webpack.config 文件

loaders: [

            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 
                          'angular2-template-loader'],
                exclude: [/\settings.ts$/]
            },
]

我发现这没有运气。

我可以使用 CopyWebpackPlugin 复制 dist 文件夹中的 settings.js 文件。但无法从捆绑中排除 settings.ts 文件。

下面是文件夹结构的截图。Webpack.config 与 src 文件夹在同一级别

我正在尝试使用 Webpack 使用 ts-loader 编译一些打字稿，但它没有按照我的预期运行 tsc。如果我对 ts 文件进行更改，webpack 不会将其编译回 js，如果我完全删除生成的 js 文件并重新运行 webpack，也会发生同样的情况。

Typescript 设置得很好，因为我可以运行./node_modules/typescript/bin/tsc并且它生成的 js 文件很好。我认为 ts-loader 应该针对我的 tsconfig.json 运行 tsc 是正确的吗？如果是这样，为什么它不接受更改并按预期生成我的 js？

正如你所看到的，我的入口点是./Client/boot-client.ts，甚至在通过 webpack 运行时也没有被编译。

我正在运行的具体 webpack 命令是：

./node_modules/webpack/bin/webpack.js --progress

给出以下输出

[0] building modulests-loader: Using typescript@2.2.2 and C:\git\coliver\couchtrace\Couchtrace.Web\tsconfig.json
[1] building modulests-loader: Using typescript@2.2.2 and C:\git\coliver\couchtrace\Couchtrace.Web\tsconfig.json
[1] Hash: 568887199c9c2bcbe47ec00669704990969dbee5
Version: webpack 2.3.2
Child
    Hash: 568887199c9c2bcbe47e
    Time: 20096ms
                 Asset    Size  Chunks                    Chunk Names
        main-client.js  554 kB       0  [emitted]  [big]  main-client
    main-client.js.map  859 kB       0  [emitted]         main-client …

由于我更新了我的项目以使用 Vuetify ( https://vuetifyjs.com )的新 2.x 版本，我在编译过程中遇到了一些类型错误，我不知道如何摆脱它们。正确地只是我的 tsconfig 以某种方式关闭。

我检查了文档并确保在我的 tsconfig.json 的类型部分中包含 vuetify，如下所示：

{
  "compilerOptions": {
    ...

    "types": [
      "webpack-env",
      "jest",
      "vuetify",
      "axios"
      ],

     ...
  }
}

我在这里不做任何花哨的事情：

import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  vuetify,
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

然后我运行开发服务器： yarn serve

ERROR in /Users/sebe/workspace/app/frontend/arena/src/main.ts
12:3 Argument of type '{ vuetify: Vuetify; router: VueRouter; store: Store<any>; render: (h: …

问题

我正在向客户端 React 应用程序添加错误边界。在开发中，我想在浏览器窗口中通过堆栈跟踪显示错误，类似于 create-react-app 或 nextjs 的错误覆盖。使用 webpack 的devtool选项，我能够生成具有正确文件名但行号错误的堆栈跟踪。

// This is what renders in the browser window
Error: You got an error!
    at ProjectPage (webpack-internal:///./src/pages/ProjectPage.tsx:96:11) // <-- 96 is the wrong line

// This is what shows up in the console
Uncaught Error: You got an error!
    at ProjectPage (ProjectPage.tsx?8371:128) // <-- 128 is the correct line

我尝试过的

• 这个答案建议不同的devtool设置，但我尝试过的设置都没有提供正确的行号。
• 这个答案建议更改retainLineswebpack 中的 babel 设置，但我没有使用 babel 来转译我的代码，我正在使用 ts-loader。另外，babel 文档建议这个选项对于不使用源映射的人来说是一个解决方法，这在这里不应该是一个问题。
• 这个答案 …

我的目录结构如下：

projectRoot\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 project-server\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 pom.xml\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 project-ui\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 file.ts.  (imports ./file.js)\n

我的问题是project-server使用转译的 js 文件，因此需要.js扩展名来解析文件。我正在使用 webpack-dev-server 进行开发和使用ts-loader，但收到以下错误：

Module not found: Error: Can't resolve './file.js' in \n'/projectRoot/project-ui/src'\n

以下是我的webpack.config.js：

module.exports = {\n  entry: './project-ui/src/file1.ts',\n  mode: "development",\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.ts$/,\n        use: 'ts-loader',\n        exclude: /node_modules/\n      },\n      ... other rules\n    ]\n  },\n  resolve: {\n    extensions: ['.js', …

我正在运行一个庞大的项目，其中有数千个.js文件是用 编写的es5，出于多种原因和好处TS，我们决定开始迁移到TS，经过几天的研究和许多研究，我将详细阐述一个几点：

要开始从 迁移es5到 ，ts我们可以通过两种方式开始：

第一种方式：

1-安装ts、创建tsconfig并allowJS设置为 true，然后开始将文件扩展名更改为.ts，默认情况下一切都会正常工作

2-由于我们想要逐渐迁移，所以我们不想立即将全局脚本替换为本机模块，换句话说，我们不想立即键入importand export，而是希望保留旧的方式global scripts并使用/// <reference path="">to加载依赖项

3-在上一步之后我们可以逐渐开始将文件转换为本机模块esm

第二种方式：

1-正如我所读到的有关UMD 的内容，它将在 borwser（客户端）和服务器上工作，这意味着支持所有类型的模块AMD, CommonJS, SystemJS and Native ES modules

2-在时尚中重写脚本后UMD，我们可以逐渐开始将脚本移动到ESM

最后但并非最不重要的一点是，关于情报，我们将开始.d.ts相应地编写文件，或者我们可以依靠它ts-loader来生成文件

最后，我们要么选择ts-loader要么babel，但我们不确定每个选项是否都有一些限制

任何有关开始迁移的最佳方式的想法都值得赞赏