无法通过Webpack和Babel公开组件库 [英] Unable to expose a component library in react with webpack and babel

查看:115
本文介绍了无法通过Webpack和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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆