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

Posted 2023-03-08

【中文标题】无法使用链接的本地节点模块构建项目

【英文标题】：Can not build project with local node module linked

【发布时间】：2019-03-26 11:18:00

【问题描述】：

我的链接节点模块有问题。所以，我正在开发基于 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"
  

【问题讨论】：

您是否尝试过以下解决方案？ https://***.com/questions/38173326/no-eslint-configuration-found-error

这行不通。这个例子是咕噜声。也有 webpack 的示例，但共享配置与我的完全相同（不包括node_modules dir）

【参考方案1】：

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

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

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

include: './src',

【讨论】：

排除数组放在哪里。 eslintrc.js 似乎不支持排除

在 webpack 配置中排除数组而不是 eslintrc.js