2016-06-23 7 views
3

definiert ist, habe ich die folgenden gulp.js bin mit Dateischluck-babel Verwendung gibt Uncaught Reference: erfordern nicht

var gulp = require('gulp'); 
var babel = require('gulp-babel'); 

gulp.task('bundle', bundle); 

function bundle() { 
    gulp.src('./src/*.jsx') 
    .pipe(babel()) 
    .pipe(gulp.dest('./dist')); 
} 

gulp.task('build', ['bundle']); 

Vor transpile "main.jsx" Inhalt

import React from 'react'; 

Nach Transpile " js“Dateien im dist-Ordner erzeugt, hat require ('')

var _react = require('react'); 

während für die Seite index.html anfordernden

<body> 

    <div id="app" ></div> 
    <script src="main.js"></script> 

</body> 

Uncaught ReferenceError: require ist nicht definiert wird in der Konsole angezeigt.

Ich weiß, dass etwas in der Build-Aufgabe falsch ist, aber ich bin nicht in der Lage, herauszufinden.

Antwort

3

Im Browser können Sie nicht require API verwenden, so dass Sie irgendwie Code bündeln müssen, haben Sie einige Optionen:

  • Browserify
  • Webpack
  • Rollup

Mit diesen Modul-Bundlern können Sie einen "Eintrittspunkt" angeben und alle erforderlichen Module in einer einzigen Datei zusammenfassen.

ähnliche Fragen, die dieses Problem zu beantworten: Gulp + babelify + browserify issue