問題描述
我正在嘗試學(xué)習(xí) browserify 來管理我的 javascript.我的第一個(gè)簡單任務(wù)是創(chuàng)建一個(gè) react.js 文件，該文件將由 gulp + browserify 生成
I am trying to learn browserify to manage my javascript. My first simple task is to create a react.js file which will be generated by gulp + browserify
var browserify = require('gulp-browserify');
gulp.task('browserify-react', function () {
return gulp.src('js/react/react.js')
.pipe(browserify())
.pipe(rename('react-generated.js'))
.pipe(gulp.dest('./dist'));
});
在 js/react/我創(chuàng)建了一個(gè)文件 react.js ，它只有兩個(gè) require 命令:
In js/react/ I created a file react.js which is just two require commands:
var React = require('react');
var ReactDOM = require('react-dom');
我希望新文件 react-generated.js 包含 react 和 react-dom 模塊.
I expect that a new file react-generated.js will content a react and react-dom modules.
會生成文件，但是當(dāng)我嘗試在我的項(xiàng)目中使用這個(gè) react-generated.js 時(shí)出現(xiàn)兩個(gè)錯(cuò)誤
File will be generated, but when I try to use this react-generated.js in my project I get two errors
ReferenceError: React is not defined
ReferenceError: ReactDOM is not defined
但如果我使用來自 facebook 的 react javascript，那么一切正常，沒有錯(cuò)誤
But if I use react javascript from facebook, so everything is ok, no errors
<script src="https://fb.me/react-0.14.0.min.js"></script>
<script src="https://fb.me/react-dom-0.14.0.min.js"></script>
問題.當(dāng)我使用 gulp-browserify 生成 react 組件時(shí)，我錯(cuò)過了什么?
Questions. What do I miss when I generate react components by using of gulp-browserify?
推薦答案
您的 react.js 文件/模塊未公開您實(shí)例化的變量 React 和 ReactDOM.在節(jié)點(diǎn)中，您可以通過修改 module.exports 對象來公開這些方法，如下所示:
Your react.js file/module isn't exposing the variables React and ReactDOM you instantiate. In node, you make these methods public by modifying the module.exports object like so:
module.exports = {
React: React,
ReactDOM: ReactDOM
}
這篇關(guān)于使用browserify打包React組件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！