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

【问题标题】：Browserify: export module and acess via script tagBrowserify：导出模块并通过脚本标签访问
【发布时间】：2015-09-11 18:55:03
【问题描述】：

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

【问题讨论】：

你在退货声明@Link.render 中没有遗漏一些引号
@elad.chen 不，这是 React 模板的语法。 grunt-react 任务将其编译为纯“javascript”。

标签： javascript gruntjs reactjs browserify

【解决方案1】：

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

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

【讨论】：