Question

我在我的项目中使用Webpack Encore将TypeScript编译为JavaScript。设置工作正常，但是当TypeScript代码出错时，我希望watch / build命令中断。现在，我知道在TS项目中，必须在我的 tsconfig.json 的 compilerOptions 对象中设置“ noEmitOnError”：true 。< / p>

现在我的webpack.config.js看起来像这样。

const Encore = require('@symfony/webpack-encore');
const babelLoader = {
    test: /\.js$/,
    loader: 'babel-loader',
    query: {
        presets: [
            [
                "@babel/preset-env",
                {
                    "useBuiltIns": "entry",
                    "corejs": {version: 3, proposals: true}
                },
            ]
        ]
    }
};

Encore
    .setOutputPath('public/build/')
    .copyFiles({
        from: './assets/images',
        to: 'images/[path][name].[hash:8].[ext]'
    })
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableVersioning()
    .enableSourceMaps()
    .addEntry('app', './assets/ts/app.ts')
    .addEntry('admin', './assets/ts/admin/app.ts')
    .enableTypeScriptLoader()
    .enableForkedTypeScriptTypesChecking()
    .addLoader(babelLoader)
    .enablePostCssLoader()
    .enableSassLoader((options) => {
        options.outputStyle = 'compressed';
    })
    .enableSingleRuntimeChunk()
    .splitEntryChunks();

const config = Encore.getWebpackConfig();

// needed for Vagrant VM for watch mode to work correctly
config.watchOptions = {
    poll: true
};

module.exports = config;

负责TS编译的行是

.enableTypeScriptLoader()
.enableForkedTypeScriptTypesChecking()

根据WebPack Encore's docs， enableForkedTypeScriptTypesChecking 方法应使Encore使用我的 tsconfig.json 。

我的tsconfig.json看起来像这样：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "noEmitOnError": true
  },
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "emitter.ts",
    "program.ts",
    "commandLineParser.ts",
    "tsc.ts",
    "diagnosticInformationMap.generated.ts"
  ]
}

所以我的编译器选项中有“ noEmitOnError”：true 。但是，当我在TS代码中故意犯了一个错误（例如：从函数调用中删除参数）时-在我的IDE中也正确地将其突出显示为错误-然后我运行 encore dev 或再生产一次，然后我的构建通过，我在构建目录中看到了已编译的捆绑JS文件。

我也将编译目标设置为ES6，但是当我查看已编译的包时，我发现所有的 let 和 const 变量声明都已转换为ES5。兼容的 var 语句。

因此，看来TS编译器正在忽略我在 tsconfig.json 中所说的内容。在我的文件夹结构中，我的 tsconfig.json ， webpack.config.js 和 package.json 在根目录中彼此相邻。

另外，当我在 webpack.config.js 中console.log记录 Encore.getWebpackConfig（）的结果时，我看到compileOptions是一个空对象。所以问题本质上是：为什么TypeScript编译器无法获取我的配置？

Answer 1

由于您将TS与webpack一起使用，因此需要告诉webpack自身停止错误，而不仅仅是TS：

https://webpack.js.org/configuration/optimization/#optimizationnoemitonerrors

在导出配置之前添加config.optimization.noEmitOnErrors = true;应该可以解决问题，我认为通过Encore对此没有特定设置。

如果只是为了捡起.enableForkedTypeScriptTypesChecking()，也就不需要tsconfig.json了-这也应该由.enableTypeScriptLoader()完成，它也允许custom configuration。

_{根据您的addEntry调用，您的files TS配置可能不正确，并且不需要。}

使用Webpack Encore设置时，如何在出现错误时强制TypeScript不编译为JS

1 个答案: