无法通过Webpack和Babel公开组件库 [英] Unable to expose a component library in react with webpack and babel
问题描述
我正在创建一个用于响应的小型组件库.可能需要某些内容,例如var Components = require('components')
.这将具有单独的组件,就像react-bootstrap
一样.我正在尝试将webpack与babel一起使用,以将其编译为index.js
文件.汇编进行得很顺利.我将此发布到本地npm注册表中,并将其安装在其他项目之一中.当我需要它时-require('components')
-require返回一个空对象.下面是我的文件夹结构
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?
推荐答案
您正在默认导出中导出对象中的组件. Babel 6为您生成以下CommonJS模块.
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};
为此,Babel生成以下代码
For this, Babel produces the following code
exports.ImageEditor = ImageEditor;
看,没有多余的default
键,一切按预期工作
Look, no extra default
key, and everything work as expected
这篇关于无法通过Webpack和Babel公开组件库的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!