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 变量不在 window 范围内。我不知道我是否遗漏了什么。有人知道吗？

Answer 1

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

将它放在 windows 范围内

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

Browserify：导出模块并通过脚本标签访问

Browserify: export module and acess via script tag

javascript

gruntjs

reactjs

browserify