我安装了一个全局npm模块,让我们称其为abc-cli
。现在我有一个运行此命令的Reactapp
:abc-cli run
。
abc-cli
基本上是获取app
中的组件并使用其源代码进行编译和运行。
现在我想将这个app
作为一个独立的npm模块发布。因此,我正在使用Webpack来生成打包文件。当解析模块时,Webpack无法解析作为abc-cli
一部分的模块。这很明显,Webpack不知道abc-cli
是什么。
所以我的问题是如何确保Webpack解析模块依赖关系?是否有任何方法可以在打包时让Webpack运行/编译abc-cli
?
或者最糟糕的情况可能是如何抑制模块解析警告或忽略这些模块。因为我知道它会存在。
例如:
在我的app
中,我有一个导入语句:
import SomeComponent from '@abc/components';
现在,在打包时,webpack不会解析该模块:
Module not found: Error: Can't resolve '@abc/components' in '/home/shishir/app/src/shared/visualizations'
如果我可以解决这个问题,那将是极大的帮助。
我的webpack配置:
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
resolve: {
extensions: ['.mjs', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'es2015',
'react',
'stage-2'
]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
externals: {
'react': 'commonjs react'
}
};
我尝试过使用 null-loader 工具:
{
test: require.resolve("@abc/components"),
use: 'null-loader'
}
但它并没有帮助。