Browserify:导出模块并通过脚本标签访问
Browserify: export module and acess via script tag
我正在尝试将 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 范围内。
我不知道我是否遗漏了什么。有人知道吗?
当您将 Link
模块导出为 module.exports = Link
时,它仅适用于 require
它的任何组件。要使该模块在 windows 范围内可用,您必须像这样
将它放在 windows 范围内
window.Link = React.createClass({
....
})
我正在尝试将 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 范围内。 我不知道我是否遗漏了什么。有人知道吗?
当您将 Link
模块导出为 module.exports = Link
时,它仅适用于 require
它的任何组件。要使该模块在 windows 范围内可用,您必须像这样
window.Link = React.createClass({
....
})