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

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 config 中添加exclude键的绝对路径，如下所示：

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

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

include: './src',