webpack 2的ts-loader排除node_modules不起作用

Question

webpack 2的ts-loader排除node_modules不起作用

3

我将为您翻译以下内容：

我尝试在webpack 2中使用typescript 2.2.2和babel加载器，并排除node_modules，但是当我尝试使用webpack命令时，仍然会从node_modules中的angular 4.0.0得到错误。

webpack.config.js：

var path = require('path');
var webpack = require('webpack');

var PROD = true;

    module.exports = {
        entry: path.join(__dirname, 'ng2', 'src','index.js'),
        output: {
            path: path.join(__dirname, 'ng2', 'dist'),
            filename: 'vendorNG2.js'
        },
        devtool: 'eval',
        resolve: {
            extensions: [".tsx", ".ts", ".js"]
        },
        watch: true,
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    exclude: [/node_modules/],
                },
                {
                    test: /\.js$/,
                    exclude: [/node_modules/],
                    use: {

                        loader: "babel-loader?cacheDirectory=true",
                        options: {
                            presets: ['es2015']
                        }
                    }
                },
            ]
        },
        plugins: PROD ? [
            new webpack.optimize.UglifyJsPlugin({
                 compress: { warnings: false }
            })
      ] : []
    }

在运行 webpack --progress 命令后：

...
ERROR in /home/user/Projects/project/front/node_modules/angular2/src/facade/lang.d.ts
(13,17): error TS2693: 'Map' only refers to a type, but is being used as a value here.

ERROR in /home/user/Projects/project/front/node_modules/angular2/src/facade/lang.d.ts
(14,17): error TS2693: 'Set' only refers to a type, but is being used as a value here.

ERROR in ./ng2/src/app/main.ts
(19,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

您可以看到来自node_modules的错误。

tsconfig.json v1：

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

tsconfig.json v2:

{
  "compilerOptions": {
    "outDir": "./ng2/dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "type":[],
    "allowJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

v2错误：

ERROR in /home/user/Projects/project/front/admin/tsconfig.json
error TS5023: Unknown compiler option 'type'.
 @ ./ng2/src/index.js 8:0-21

ERROR in ./ng2/src/app/main.ts
Module build failed: error while parsing tsconfig.json
 @ ./ng2/src/index.js 8:0-21

在tsconfig.js v3中添加("experimentalDecorators": true)后，一些错误得以解决:

{
  "compilerOptions": {
    "outDir": "./ng2/dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
     "experimentalDecorators": true,
    "allowJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

v3错误：

... /home/user/Projects/project/front/node_modules/angular2/src/facade/lang.d.ts中的ERROR (13,17):错误TS2693：'Map'仅用作类型引用，但在此处被用作值。

/home/user/Projects/project/front/node_modules/angular2/src/facade/lang.d.ts中的ERROR (14,17):错误TS2693:'Set'仅用作类型引用，但在此处被用作值。

- Edgaras Karka

你的 tsconfig 长什么样？ - tymeJV

查看最新的帖子。 - Edgaras Karka

你尝试过在 tsconfig 中添加 experimentalDecorators: true 吗？如果这不起作用，尝试添加 "types": []。 - tymeJV

尝试使用 "types:[]" 而不是 "type"。 - tymeJV

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stout01 · Accepted Answer

你在 tsconfig 中是否添加了排除 node_modules 的配置？

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

此外，您没有指定使用的Typescript和Angular版本。

编辑：您更新了您的问题以指定您正在使用Angular 4，但是您的更新错误显示一个node_modules/angular2/文件夹，这似乎不正确。在继续之前，请尝试删除您的node_modules文件夹并再次运行npm install。

否则，看起来您遇到了typings问题。您安装了任何@types吗？

以下是我的tsconfig.json设置示例：

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es2015", "dom" ],
        "removeComments": false,
        "noImplicitAny": false,
        "types": [ "jasmine", "lodash", "core-js" ],
        "typeRoots": [
            "../node_modules/@types"
        ]
    },
    "exclude": [
        "node_modules",
        "wwwroot",
        "temp"
    ]
}

我的 node_modules 文件夹在父目录中，因此我在 typeRoots 中指定该目录。同时，我还安装了以下类型：

"@types/core-js": "0.9.37",
"@types/jasmine": "2.5.43",
"@types/lodash": "4.14.55",