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

tslint-loader with webpack 2.1.0-beta.25

提问by ufk

I have an angular2 Project that I compress/compile with webpack.

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

I use tslink loader with webpack so I have tslint related configuration in webpack.config.js.

我将 tslink loader 与 webpack 一起使用，所以我在webpack.config.js.

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"
        }
    ],
}
}

I updated webpack 1.13.1 to 2.1.0-beta.25 and tslint configuration breaks the complication process of npm run build.

我将 webpack 1.13.1 更新为 2.1.0-beta.25 并且 tslint 配置打破了npm run build.

I changed the preLoadersdirective to loaders

我将preLoaders指令更改为loaders

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

that's not enough cause I still get the error

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

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.

so I should move the tslint configuration and place it somewhere else. kinda lost here. so any information regarding the issue would be greatly appreciated.

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

thanks!

谢谢！

回答by jontem

For others who have problems with preloaders in webpack 2. In beta v2.1-beta.23 there are breaking changes with pre/postLoaders.

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

First the "loaders" section should be renamed to "rules". Also pre/postLoaders is now defined under rules.

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

In my case i was using tslint as a preLoader. To add a pre/postLoader to rules add the enforceproperty with value either preor post.

就我而言，我使用 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)/
        }
    ]
}

More info in the release on github: Webpack v2.1.0-beta.23

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

In the release info there is also a link to a pull requestthat shows the needed changes going from v2.1.0-beta.22to v2.1.0-beta.23in webpack config file. There you can see that you also need the LoaderOptionsPlugin.

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

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

回答by ufk

ok.. so I just needed to move the tslintdefinition under:

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

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

and declared

并宣布

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

回答by Raghav Manikandan

If you don't want to add a plugin, you can do something like this,

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

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