Question

我的链接节点模块有问题。因此，我正在使用基于Webpack 4的孔设置来开发React应用。此外，我正在构建自己的节点模块，该模块将在多个React应用之间共享。我在ES6中编写模块，并使用babel进行翻译。问题是，一旦我想使用导入的模块启动react应用，就会出现以下错误：

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

一旦我在模块中设置了eslinter，它就会报告另一个问题（似乎来自react app的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并仅定义我们要处理/传输的文件，例如：

include: './src',

无法建立具有链接的本地节点模块的项目

1 个答案: