typescript - awesome-typescript-loader 仅加载/编译引用文件

标签 typescript webpack webpack-2

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

用过的工具

  • awesome-typescript-loader:3.1.2,
  • 网络包: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'
            }
        ]
    }
}

配置

{
  "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 本身不包含任何未导入的文件。但是 TypeScript 似乎会检查项目中的每个文件,除非另有配置。来自tsconfig.json docs :

If the "files" and "include" are both left unspecified, the compiler defaults to including all TypeScript (.ts, .d.ts and .tsx) files in the containing directory and subdirectories except those excluded using the "exclude" property.

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

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

据我测试,您还可以将它设置为一个空数组,这样默认情况下它不会检查任何文件,awesome-typescript-loader 会将文件传递给编译器正如预期的那样,它们仍将被检查。

"files": []

关于typescript - awesome-typescript-loader 仅加载/编译引用文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43234525/

相关文章:

typescript :类类型的实例

node.js - 无效的配置对象。 Webpack 已使用与 Angular V4.0.0 中的 API 模式 2 不匹配的配置对象进行初始化

json - 字段 'browser' 不包含 react 的有效别名配置

angular - 如何正确检查 typescript 应用程序中未使用的变量/参数

reactjs - Material-ui-next typescript 错误

json - 如何将 typescript 定义解析为 json?

angular - 使用 Angular CLI 并且无法在 CSS 文件中使用相对图像路径

webpack - 如何有效地为多个 URL 配置 webpack 代理?

javascript - 如何从项目或目录自动导入 .scss 文件

javascript - Webpack 2 + ExtractTexWebpacktPlugin = 意外标记