【问题标题】:awesome-typescript-loader load / compile only refrenced filesawesome-typescript-loader 仅加载/编译引用的文件
【发布时间】:2017-08-31 06:21:25
【问题描述】:

是否可以将 awesome-typescript-loader 或 webpack 或 tsc 配置为仅编译从条目中引用(直接、间接)的文件?我想移植一个现有的应用程序,并希望能够编译我部分移植的代码,而某些 unreferenced 文件是不可编译的。

用过的工具

  • 很棒的打字稿加载器:3.1.2,
  • webpack:2.3.3

webpack.js

var webpack = require('webpack');
module.exports = {
    entry: {
        'index': './Scripts/index.ts',
    },

    output: {
        path: helpers.root('dist'),
        filename: '[name].js'
    },

    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /.ts$/,
                loader: 'awesome-typescript-loader'
            }
        ]
    }
}

tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "importHelpers": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "sourceMap": true,
    "lib": [
      "dom",
      "es5",
      "scripthost"
    ],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules"
  ]
}

错误消息(来自 index.ts 未引用的文件)

[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 46 errors
Hash: a2f6e7a56b152c02a325
Version: webpack 2.3.3
Time: 3554ms
   Asset     Size  Chunks             Chunk Names
index.js  2.73 kB       0  [emitted]  index
   [0] ./Scripts/index.ts 79 bytes {0} [built]

ERROR in [at-loader] ./Scripts/editor/foo.ts:47:61
    TS2448: Block-scoped variable 'eventList' used before its declaration.

... MORE ERRORS ...

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.9.2
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! FooBar@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the FooBar@1.0.0 build script 'webpack --config webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the FooBar package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --config webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs FooBar
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls FooBar
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\FooBar\npm-debug.log

【问题讨论】:

  • Webpack 仅包含正在导入的文件(从入口点开始),因此仅将加载器应用于那些额外匹配规则的文件。我在这里没有看到你的问题。
  • [at-loader] Checking started in a separate process... [at-loader] Checking finished with 49 errors 在未引用的文件中。

标签: typescript webpack webpack-2


【解决方案1】:

Webpack 本身不包含任何未导入的文件。但 TypeScript 似乎会检查项目中的每个文件,除非另有配置。来自tsconfig.json docs

如果“files”和“include”都未指定,编译器默认包含包含目录和子目录中的所有 TypeScript(.ts、.d.ts 和 .tsx)文件,除了那些使用“exclude”排除的文件" 属性。

您可以将files 选项设置为仅包含您的入口点,并且它应该只检查您正在导入的文件。

"files": [
  "Scripts/index.ts"
]

据我测试,您还可以将其设置为空数组,因此默认情况下它不会检查任何文件,awesome-typescript-loader 将按预期将文件传递给编译器,并且它们仍将被检查.

"files": []

【讨论】:

  • "files": [] 似乎适用于 awesome-typescript-loader,但会因错误 TS18002 中断 ts-loader 和 tsc:配置文件 'tsconfig.json' 中的 'files' 列表为空。
  • 这种方法不适用于 webpack 3.10.0 和 awesome-typescript-loader 3.4.1。出于某种原因,ATL 包含所有文件,而不是仅包含引用的文件。
  • 适用于我的 webpack 4.1.1 和 ATL 5.0.0-1
  • 这是一个 hacky 解决方法,不是一个有效的解决方案,因为如果您将 "files" 设置为 [],那么这会覆盖其他设置,例如 tsconfig 中的 paths
猜你喜欢
  • 2017-05-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-12-16
  • 2018-10-17
  • 2019-07-08
相关资源
最近更新 更多