无法使用链接的本地节点模块构建项目

Question

我的链接节点模块有问题。所以，我正在开发基于 webpack 4 的带有孔设置的反应应用程序。除此之外，我正在构建自己的节点模块，它将在几个反应应用程序之间共享。我用 ES6 编写模块，并使用 babel 进行编译。问题是，一旦我想使用导入的模块启动 react 应用程序，就会出现以下错误：

Uncaught Error: Module build failed (from ./node_modules/eslint-loader/index.js): Error: No ESLint configuration found.

一旦我在模块中设置了 eslinter，它就会报告另一个问题（似乎来自 react 应用程序的 eslinter 正试图在链接的节点模块上运行，这显然不应该发生在节点模块上）。

只有在链接模块时才会出现此问题。一旦我将模块直接放入node_modules 目录（未链接），问题就会消失，一切正常。那么，您知道如何从 webpack 配置中排除还链接的节点模块吗？ 这是我的 webpack 配置：

const Dotenv = require('dotenv-webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebPackPlugin({
    template: './src/index.html',
    filename: './index.html',
});

const path = require('path');

module.exports = {
    entry: [
        'babel-polyfill',
        './src/index.jsx',
    ],
    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            modules: path.resolve(__dirname, 'src/modules/'),
            routes: path.resolve(__dirname, 'src/routes/'),
            lib: path.resolve(__dirname, 'src/lib/'),
            src: path.resolve(__dirname, 'src/'),
        },
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader',
                    'eslint-loader',
                ],
            },
            {
                test: /\.s?css$/,
                use: [
                    'style-loader', // creates style nodes from JS strings
                    'css-loader', // translates CSS into CommonJS
                    'sass-loader', // compiles Sass to CSS, using Node Sass by default
                ],
            },
            {
                test: /\.(ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'public/fonts',
                            name: '[name]-[hash].[ext]',
                        },
                    },
                ],
            },
        ],
    },
    devServer: {
        historyApiFallback: true,
    },
    plugins: [htmlPlugin, new Dotenv()],
};

这是我在 react 应用中的 .eslintrc 文件：

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "jest": true
  },
  "rules": {
    "class-methods-use-this": 0,
    "global-require": 0,
    "import/no-named-as-default": 0,
    "indent": ["error", 4],
    "jsx-a11y/label-has-associated-control": [ 2, {
      "controlComponents": ["Input"],
      "depth": 3,
    }],
    "jsx-a11y/label-has-for": 0,
    "max-len": ["error", { "code": 120 }],
    "react/jsx-indent": ["error", 4],
    "react/jsx-indent-props": ["error", 4],
    "react/prefer-stateless-function": ["off"],
    "no-underscore-dangle": 0,
    "import/no-extraneous-dependencies": ["error", { "devDependencies": ["./src/testutils/**/*.js", "./src/**/*.spec.js"] }],
    "react/style-prop-object": ["off"]
  },
  "settings": {
    "import/resolver": "webpack"
  }
}

Answer 1

好的，所以我找到了问题和解决方案。这是因为 webpack 没有将链接模块视为node_modules 下的目录，而是将其视为模块所在的绝对路径（在我的情况下是/var/workspace/mymoduledirectory）。最终解决方案可能是在 webpack 配置中添加 exclude 键的绝对路径，如下所示：

exclude: [/node_modules/, '/var/workspace/themoduledirectoryname'],

此外，解决方案是使用 include 而不是 exclude 并仅定义我们要 lint/transpile 的文件，例如：

include: './src',