[英]Failure to bundle a React component library via Webpack, but it works via 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返回一個空對象。 下面是我的文件夾結構
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'
]
}
};
知道我在做什么錯嗎?
您正在默認導出中導出對象中的組件。 Babel 6為您生成以下CommonJS模塊。 參見REPL :
exports.default = {
ImageEditor: ImageEditor
};
然后,您可以像下面這樣使用該組件:
var ImageEditor = require('my-lib').default.ImageEditor
您的組件被隱藏在默認鍵下。 如果您不想要它,請改用命名的導出。
export {ImageEditor};
為此,Babel產生以下代碼
exports.ImageEditor = ImageEditor;
看,沒有額外的default
密鑰,並且一切正常
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.