[英]ES6/React package - exported classes undefined when trying to import (built with webpack)?
We have created a package for collecting together React components we share between several projects, but for some reason when we try to import the package the export are undefined. 我们创建了一个包来收集在多个项目之间共享的React组件,但是由于某些原因,当我们尝试导入包时,导出是不确定的。 For purposes of the question I am providing an adjusted
index.js
that illustrates the issue (in the real scenario the classes are in separate files): 为了这个问题,我提供了一个调整后的
index.js
来说明问题(在实际情况下,类位于单独的文件中):
import React, {Component} from 'react';
class MyComponent1 extends Component {
render () {
return (<div>Component 1</div>);
}
}
class MyComponent2 extends Component {
render () {
return (<div>Component 2</div>);
}
}
console.log('###### MyComponent1', MyComponent1);
console.log('###### MyComponent2', MyComponent2);
export { MyComponent1, MyComponent2 };
export default function () {
console.log('Monkey madness');
}
// Shows expected exports in module.exports, but
// aren't there on import
console.log('###### Module', module);
The webpack.conf.js
we are using: 我们正在使用的
webpack.conf.js
:
const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
var BUILD_DIR = path.resolve(__dirname, 'lib');
var APP_DIR = path.resolve(__dirname, 'src');
module.exports = {
entry: APP_DIR + '/index.js',
devtool: 'source-map',
output: {
//library: 'myReactComponents',
path: BUILD_DIR,
filename: 'index.js'
},
module: {
rules: [{
test: /\.js$/,
// include: APP_DIR,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react'],
}
}
}]
},
plugins: [
new CleanWebpackPlugin([BUILD_DIR], {
root: path.resolve(__dirname),
verbose: true,
dry: false,
exclude: []
})
]
};
Running webpack
generates two files lib/index.js
and lib/index.js.map
: 运行
webpack
生成两个文件lib/index.js
和lib/index.js.map
:
Hash: 3a52a7d7bb440ee0c467
Version: webpack 3.2.0
Time: 2331ms
Asset Size Chunks Chunk Names
index.js 158 kB 0 [emitted] main
index.js.map 186 kB 0 [emitted] main
[18] ./src/index.js 3.33 kB {0} [built]
+ 36 hidden modules
In the downstream project our components package is npm installed and then in the code we have: 在下游项目中,我们的组件包已安装npm,然后在代码中具有:
import MyComponents, {MyComponent1, MyComponent2} from 'my-components';
console.log('>>> MyComponents', MyComponents);
console.log('>>> MyComponent1', MyComponent1);
console.log('>>> MyComponent2', MyComponent2);
Running this I see the console statements in our packages shows: 运行此命令,我在程序包中看到控制台语句显示:
>>> MyComponents {}
>>> MyComponent1 undefined
>>> MyComponent2 undefined
I have tried debugging this and see the modules.exports does take the assigned values, but then quickly get lost with everything else happening in the code. 我试过调试,然后看到modules.exports确实采用了分配的值,但是很快就迷失了代码中发生的所有其他事情。
Can anyone suggest what might be going wrong and how to try to solve this? 谁能建议可能出什么问题以及如何解决这个问题?
BTW I just tried building this with gulp and I don't run into this issue, so I am suspecting something is wrong with my webpack setup? 顺便说一句,我刚刚尝试用gulp构建它,但没有遇到这个问题,所以我怀疑我的webpack设置有问题吗? Key versions:
关键版本:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.