带有 webpack 2.1.0-beta.25 的 tslint-loader

Posted 2023-03-13

【中文标题】带有 webpack 2.1.0-beta.25 的 tslint-loader

【英文标题】：tslint-loader with webpack 2.1.0-beta.25

【发布时间】：2017-02-16 14:29:12

【问题描述】：

我有一个使用 webpack 压缩/编译的 angular2 项目。

我使用带有 webpack 的 tslink 加载器，所以我在 webpack.config.js 中有 tslint 相关配置。

module.exports = 
...
tslint: 
    configuration: 
        rules: 
            quotemark: [true, "double"]
        
    ,

    // tslint errors are displayed by default as warnings
    // set emitErrors to true to display them as errors
    emitErrors: false,

    // tslint does not interrupt the compilation by default
    // if you want any file with tslint errors to fail
    // set failOnHint to true
    failOnHint: true,

    // name of your formatter (optional)
    formatter: "",

    // path to directory containing formatter (optional)
    formattersDirectory: "node_modules/tslint-loader/formatters/",

    // These options are useful if you want to save output to files
    // for your continuous integration server
    fileOutput: 
        // The directory where each file"s report is saved
        dir: "./webpack-log/",

        // The extension to use for each report"s filename. Defaults to "txt"
        ext: "xml",

        // If true, all files are removed from the report directory at the beginning of run
        clean: true,

        // A string to include at the top of every report file.
        // Useful for some report formats.
        header: "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<checkstyle version=\"5.7\">",

        // A string to include at the bottom of every report file.
        // Useful for some report formats.
        footer: "</checkstyle>"
    
,
...
preLoaders: [
        
            test: /\.ts$/,
            loader: "tslint"
        
    ],

我将 webpack 1.13.1 更新为 2.1.0-beta.25 并且 tslint 配置打破了npm run build 的复杂化过程。

我将preLoaders 指令更改为loaders

module: 
        ....
        
            test: /\.ts$/,
            loader: 'tslint',
            exclude: /(node_modules)/,
            enforce: 'pre'
        ,
    ],

这还不够，因为我仍然收到错误

For loader options: webpack 2 no longer allows custom properties in configuration.
 Loaders should be updated to allow passing options via loader options in module.rules.

所以我应该移动 tslint 配置并将其放在其他地方。有点迷失在这里。因此，我们将不胜感激有关该问题的任何信息。

谢谢！

【参考方案1】：

好的.. 所以我只需要将tslint 定义移到：

plugins: [
    new LoaderOptionsPlugin(
        options: 
           tslint: 
             ...

并声明

const LoaderOptionsPlugin = require("webpack/lib/LoaderOptionsPlugin");

【参考方案2】：

对于其他对 webpack 2 中的预加载器有问题的人。在 beta v2.1-beta.23 中，pre/postLoaders 发生了重大变化。

首先应将“加载程序”部分重命名为“规则”。现在还根据规则定义了 pre/postLoaders。

在我的例子中，我使用 tslint 作为预加载器。要将 pre/postLoader 添加到规则中，请添加 enforce 属性，其值为 pre 或 post。

module: 
    rules: [
        
            enforce: 'pre',
            test: /\.tsx?$/,
            loader: 'tslint',
            exclude: /(node_modules)/,
        ,
        
            test: /\.tsx?$/,
            loaders: ['awesome-typescript-loader'],
            exclude: /(node_modules)/
        
    ]

更多信息在 github 上发布：Webpack v2.1.0-beta.23

在发布信息中还有一个指向 pull request 的链接，它显示了 webpack 配置文件中从 v2.1.0-beta.22 到 v2.1.0-beta.23 所需的更改。在那里你可以看到你还需要 LoaderOptionsPlugin。

plugins: [
    new webpack.LoaderOptionsPlugin(
        options: 
            tslint: 
                emitErrors: true,
                failOnHint: true
            
        
    )
]

【讨论】：

很棒的答案。我可以使用不带括号的 node_modules 吗？谢谢。

【参考方案3】：

如果你不想添加插件，你可以这样做，

module: 
  rules: [
    
      enforce: 'pre',
      test: /\.ts$/,
      loader: 'tslint-loader?' + JSON.stringify(
        emitErrors: true,
        failOnHint: true
      )
    
  ]