reactjs – React,ES6与Browserify,babel和gulp一起编译,发出导
我正在玩ES6,Gulp和Browserify,我正在设置环境的第一步.
这是我的browserify task: gulp.task('client',cb => { return browserify({ entries: paths.publicEntries,extensions: ['.jsx'],debug: true }) .transform('babelify',{ presets: ['es2015','react'] }) .bundle() .pipe(source(paths.bundle)) .pipe(gulp.dest(paths.bundleDest)); }); 这可能是主脚本index.jsx 'use strict'; import React from 'react'; import ReactDOM from 'react-dom'; import TestPage from './components/test'; (() => { ReactDOM.render( <TestPage/>,document.getElementById('mainContainer') ); })(); 这是我创建的组件test.jsx 'use strict'; import React from 'react'; class TestPage extends React.Component { render() { return <h1> Hello World! </h1> } } export default TestPage; 一切看起来都对我来说,但是使用index.jsx中的import语句有一种奇怪的行为(我不知道问题出在哪里). 为了确定什么工作,什么不工作,我替换了我的组件导入实际代码,如下所示: 'use strict'; import React from 'react'; import ReactDOM from 'react-dom'; //import TestPage from './components/test'; class TestPage extends React.Component { render() { return <h1> Hello World! </h1> } } (() => { ReactDOM.render( <TestPage/>,document.getElementById('mainContainer') ); })(); 这里一切正常,但如果我使用标准的import语句,我什么都得不到: 注意: > .component/test.jsx和./index.jsx正确加载. 如果有人想要深入了解这里的回购: 为了正确导入我的组件,我缺少什么? 解决方法
您正在gulpfile.babel.js中为您的应用创建多个入口点(基本上,您正在创建两个捆绑包).
const paths = { src: './src',publicSrc: './public/js',dest: './app',bundle: 'bundle.js',bundleDest: './app/public/js',publicEntries: [ './public/js/index','./public/js/components/test' <--- Remove this line. ] }; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |