Question

如何使用Browserify中的独立选项导出React组件？基本上我试图用我拥有的所有常见的React组件创建一个包JS，以便我可以在多个项目中共享它。

以下是我拥有的典型React组件，

var Layout = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },
    render: function() {
        return (
            <div id="parent">
                <Header {...this.props}/>
                <Sidebar {...this.props}/>
                <div id="main-content">
                    <div className="uk-width-1-1">
                        {this.props.children}
                    </div>
                </div>
                <Footer {...this.props}/>
            </div>
        );
    }
});

export default Layout;

我在独立选项中使用Browserify，如此，

gulp.task('js-compile', 'Compile JS', ['common-clean'], function() {
    return browserify(paths.scripts.entry, {
            debug: isVerbose,
            standalone: 'SharedComponents'
        })
        .transform(babelify, {
            presets: ['react', 'es2015', 'stage-0']
        })
        //.external(['react', 'jquery'])
        .bundle()
        .pipe(sourceStream('shared_components.js'))
        .pipe(buffer())
        .pipe($.sourcemaps.init({
            loadMaps: true
        }))
        .pipe($.sourcemaps.write('./'))
        .pipe(gulp.dest(paths.dist.scripts.dir));
});

在父项目中，我使用以下内容

import { Layout } from '../shared_components';

const AppRouter = () => {
    return (
        <Route path='/' component={Layout}>
            <IndexRoute component={TestPage}/>
        </Route>
    );
};

export default AppRouter;

在这个项目中，我填充shared_components，因为我希望将其包含在<script></script>中，最终将来自CDN。

"browserify-shim": {
    "../shared_components": "global:SharedComponents"
}

不幸的是，最终结果是此组件既未加载也未引发任何错误。这是正确的方法吗？

Browserify独立反应组件

0 个答案: