15

我设置了一个多包项目，其中有一个依赖于 TypeScript 库的 JavaScript 包。最初我安装了 Sinopia 并且每次对它进行更改时都会重新安装该库。然后我看到npm link并认为它会更容易开发。不幸的是，当我链接库（使用npm link ../typescript-package）并构建时，它给出了一个错误：

ERROR in ../typescript-package/dist/index.js
Module build failed: Error: No ESLint configuration found.

由于它们是单独的包，我不太清楚为什么 Webpack 试图将 eslint 应用于这个包。这是我的webpack.common.js文件（使用合并和 dev vs prod 配置应该无关紧要）：

// webpack.common.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const babelOptions = {
  presets: ['react', 'es2015', 'stage-0'],
  sourceMaps: true,
  retainLines: true,
};

module.exports = {
  entry: {
    solver: './source/index.jsx',
  },
  output: {
    path: `${__dirname}/dist`,
    filename: '[name].js',
    publicPath: '/dist/',
  },
  resolve: {
    modules: ['source', 'node_modules/'],
    extensions: ['.js', '.jsx', '/index.jsx', '.json', '.ts', '/index.ts', '.scss', '/index.scss', '.css'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: babelOptions,
          },
          {
            loader: 'eslint-loader',

            options: {
              emitWarnings: true,
            },
          },
        ],
        exclude: /node_modules/,
      }, {
        test: /\.js$/,
        loader: 'source-map-loader',
        enforce: 'pre',
        exclude: /node_modules/,
      }, {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{
            loader: 'css-loader',
            options: {
              minimize: true,
              localIdentName: '[local]_[hash:base64:5]',
            },
          }, {
            loader: 'sass-loader',
            options: {
              includePaths: ['source/design'],
            },
          }],
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true,
    }),
  ],
  node: {
    global: true,
  },
};

如果需要，我还可以提供其他配置或 package.json 文件。

4

3 回答 3

5

方式 1 - Webpack 推荐

根据 webpack 文档：https ://webpack.js.org/configuration/module/#rule-conditions

当心！资源是文件的解析路径，这意味着符号链接资源是真实路径而不是符号链接位置。在使用符号链接包的工具（如 npm 链接）时，请记住这一点，像 /node_modules/ 这样的常见情况可能会无意中错过符号链接文件。请注意，您可以通过 resolve.symlinks 关闭符号链接解析（以便将资源解析到符号链接路径）。

所以根据它你可以禁用符号链接：https ://webpack.js.org/configuration/resolve/#resolvesymlinks

方式 2 - 花式 hack

但也许您的项目需要符号链接。所以，我像这样使用我的 eslint 规则：

{
  test: /\.js$/,
  enforce: 'pre',
  use: 'eslint-loader',
  include: path.resolve(__dirname), // <-- This tell to eslint to look only in your project folder
  exclude: /node_modules/
}

加上显然你自己的这个加载器的配置。

于 2020-02-07T10:51:19.477 回答
1

我也在处理这个问题。我不完全确定 ESLint 为什么要在外部包中查找配置文件（我希望本地 rc 文件就足够了），但是由创建的符号链接npm link将外部包带出./node_modules/，否则会被排除在外装载机。

我想出的解决方法是将包复制到./node_modules/. 然后通过excludesWebpack 配置中的规则过滤掉它。

我知道这非常不雅，不应该“足够好”，但我花了一些时间试图解决这个问题，这是我能想到的最好的。在出现更好的情况之前，您至少可以着手解决更紧迫的问题。

于 2018-01-29T18:26:24.257 回答
0

您还可以添加.eslintignore文件并将真实路径添加到链接模块

// Content of .eslintignore
C:/path/to/your/linked/module

这是必需的，因为 webpack 通过其真实路径而不是node_modules文件夹中的路径解析模块（请参阅webpack 文档）。通常 eslintnode_modules默认会忽略，但正因为如此，它在这里不起作用。

于 2022-01-18T11:13:23.190 回答