将 gulp 与捆绑包一起使用时出错 - HTML 解析错误

Error using gulp with bundle - HTML parsing error

本文关键字：出错 HTML 错误 gulp 包一起 一起      更新时间：2023-09-26

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

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时不喜欢它，因为我得到了这个错误：

事件.js：85 投掷者;未处理的"错误"事件 ^ 错误：解析文件 C：''Dev''react_wkspc''main.js：意外令牌 （5：2）

我的主要.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 的正确方法，因为它与官方 React 文档的脚本相同

我也尝试了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']);

并得到同样的错误

语法错误：C：/Dev/react_wkspc/main.js：意外的标记 （5：2）

我能读到的缺失步骤是

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

这是我的一个项目的例子，b是浏览器化

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",
相关文章：