将 gulp 与 bundle 一起使用时出错 - HTML 解析错误

Question

所以我得到了这个非常简单的 gulp 任务：

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');

gulp.task('browserify', function() {
    return browserify({ entries: ['main.js'] })
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'));
});

gulp.task('default', ['browserify']);

这应该只是将browserify 我的main.js 转换为bundle.js，然后将其存储在dist 文件夹中。 问题是，似乎 gulp 在解析 HTML 时不喜欢它，因为我收到了这个错误：

events.js:85 投掷者； // 未处理的“错误”事件 ^ 错误：解析文件 C:\Dev\react_wkspc\main.js: Unexpected token (5:2)

我的 main.js 也很基础：

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>First test of react!</h1>,
  document.getElementById('container');
);

错误似乎来自 <h1>First test of react!</h1>, 这一行，我相信这是使用 React 的正确方法，因为它与 the official React doc 是相同的脚本

我也试过babelify 和这个脚本：

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
var browserify = require('browserify');

gulp.task('browserify', function () {
  browserify({
    entries: 'main.js',
    extensions: ['.js'],
    debug: true
  })
  .transform(babelify)
  .bundle()
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('dist'));
});

gulp.task('default', ['browserify']);

得到同样的错误

SyntaxError: C:/Dev/react_wkspc/main.js: Unexpected token (5:2)

Answer 1

我能读到的缺少的步骤是

• 添加 babelify
• 确保您还安装了正确的 babel 预设，以便可以正确解析您的源代码。

这是我的一个项目的一个例子，b 是 browserify

function bundleShare(b, output) {
  return b
    .transform(babelify.configure({
      presets: ["es2015", "react"]
    }))
    .bundle()
    .pipe(source(output))
    .pipe(gulp.dest('./wwwroot/assets'));
}

在我的 json 包中，我有以下开发依赖项

"

babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babelify": "^7.2.0",