I'm creating a small component library for react. Something that can be required like var Components = require('components')
. This will have individual components, much like react-bootstrap
does. I'm trying to use webpack with babel to compile this into an index.js
file. The compilation went well. I published this to my local npm registry and installed it in one of my other projects. When I require it - require('components')
- the require returns an empty object. Below is my folder structure
root
|- components
| |- ImageEditor.js
|
|- lib
| |- index.compiled.js (file compiled by webpack)
|
|- index.js (requires ./components/ImageEditor.js, entry point for webpack)
|- webpack.config.js
ImageEditor.js
import React from 'react';
import ReactDOM from 'react-dom';
import Canvas from './utils/canvas';
import '../stylesheets/imageeditor.scss';
class ImageManipulation extends React.Component {
static propTypes = {};
state = {
height: 200,
width: 200,
scale: 1.25
};
static defaultProps = {
color: [213, 214, 217, 0.6],
image: ""
};
...
render() {
return (
<div className="_react-image-manipulation">
<div className="_cover-box">
{ this.loadComponent() }
</div>
</div>
);
}
}
export default ImageManipulation;
index.js
import ImageEditor from './components/ImageEditor';
export default {
ImageEditor
};
webpack.config.js
var path = require('path');
var NODE_ENV = process.env.NODE_ENV || 'development';
var WebpackNotifierPlugin = require('webpack-notifier');
var UglifyJSPlugin = require("webpack/lib/optimize/UglifyJsPlugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");
var commonPlugins = [
new WebpackNotifierPlugin({
title: 'Contour Components'
})
];
function getPlugins() {
if (NODE_ENV == 'prod') {
commonPlugins.push(new CleanWebpackPlugin(['lib/*']));
commonPlugins.push(new UglifyJSPlugin({
compress: {
warnings: false
}
}));
}
return commonPlugins;
}
module.exports = {
devtool: 'sourcemap',
entry: {
index: './index.js'
},
output: {
path: path.join(__dirname, 'public'),
filename: '[name].compiled.js'
},
plugins: getPlugins(),
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
query: {
cacheDirectory: true,
presets: ['es2015', 'stage-0', 'react'],
plugins: ['add-module-exports', "transform-class-properties"]
},
exclude: /node_modules/
}, {
test: /\.json$/,
loader: 'json-loader'
}, {
test: /\.png$/,
loader: "url-loader?limit=100000&mimetype=image/png"
}, {
test: /(\.scss|\.css)$/,
include: /components/,
loader: 'style!css!sass'
}]
},
resolve: {
extensions: ['', '.scss', '.js', '.json', '.png'],
modulesDirectories: [
'node_modules',
'components'
]
}
};
Any idea what I'm doing wrong here?
You are exporting component in the object in the default export. Babel 6 produces the following CommonJS module for you. See REPL :
exports.default = {
ImageEditor: ImageEditor
};
Then you can use this component like this:
var ImageEditor = require('my-lib').default.ImageEditor
Your component is hidden under the default key. If you don't want it, use named exports instead.
export {ImageEditor};
For this, Babel produces the following code
exports.ImageEditor = ImageEditor;
Look, no extra default
key, and everything work as expected
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.