javascript - Browserify:导出模块并通过脚本标签访问

Question

我正在尝试将一个 javascript 模块(在本例中，使用 React 实现)导出到一个文件并通过脚本标签访问它。

到目前为止我做了什么。我的脚本:

var Link = React.createClass({

    propTypes: {
        data: React.PropTypes.object,
        classname: React.PropTypes.string,
        target: React.PropTypes.string
    },

    render: function() {
        return <a href={this.props.data.url} title={ this.props.data.name } className={ this.props.classname }>{ this.props.data.name }</a>;
    }

});

module.exports = Link;

使用 grunt，我的任务是将其转换为 ES5(使用 grunt-react)并对其进行浏览器化:

browserify: {
   options: {
     transform: [ require('grunt-react').browserify ]
   },
   client: {
     src: ['src/components/Link.js'],
     dest: 'dist/components/Link.js'
   }
}

生成了 Link.js 文件，但 Link 变量不在窗口范围内。我不知道我是否遗漏了什么。有人有什么想法吗？

Answer 1

当您将Link 模块导出为module.exports = Link 时，它仅对需要 它的任何组件可用。要使该模块在 Windows 范围内可用，您必须像这样将它放在 Windows 范围内

window.Link = React.createClass({
....
})