为什么“-"(破折号）给予“;意外的令牌错误“;和Gulp在Babelify上

Why is "-" (dash) giving "Unexpected token error" on Babelify with Gulp?

本文关键字：令牌 Gulp 错误 Babelify 给予 quot 破折号 为什么 意外      更新时间：2023-09-26

我正在用Browserify和Babelify建立（或实际修改现有的）项目。由于某些原因，我无法正确配置我的gulpfile。如果重要的话，这个项目本身就是一个React项目。

我解决了大部分问题，但现在我在Browserify上遇到了"意外令牌"错误。它是由React组件或具有带破折号的属性名称的html元素引起的，即：

<button type="button" data-toggle="collapse">

我的浏览器化任务：

gulp.task('browserify', function() {
  browserify('./src/js/main.js')
    .transform(babelify.configure({
      presets: ["react", "es2015"]
    }))
    .bundle()
    .on('error', function(err){
      process.stdout.write('' + err + ''n');
      notifier.notify({
        title: 'Error',
        message: err,
        sound: true,
        wait: true
        }, function (err, response) {
      });
    })
    .pipe(source('main.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(connect.reload());
});

Package.json:

{
  "name": "srcd-mockup",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "babel-preset-es2015": "^6.0.12",
    "bootstrap-sass": "^3.3.5",
    "browserify": "^11.2.0",
    "flux": "^2.1.1",
    "font-awesome": "^4.4.0",
    "gulp": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "jquery": "^2.1.4",
    "lodash": "^3.10.1",
    "node-notifier": "^4.3.1",
    "react": "^0.14.1",
    "react-dom": "^0.14.1",
    "react-redux": "^4.0.0",
    "react-router-component": "^0.27.2",
    "reactify": "^1.1.1",
    "redux": "^3.0.4",
    "redux-logger": "^2.0.4",
    "updeep": "^0.10.1",
    "vinyl-source-stream": "^1.1.0"
  },
  "devDependencies": {
    "babel-preset-react": "^6.0.12",
    "babelify": "^7.0.2",
    "gulp-connect": "^2.2.0",
    "gulp-notify": "^2.2.0",
    "gulp-sass": "^2.0.4",
    "gulp-uglify": "^1.4.1",
    "redux-devtools": "^2.1.5"
  },
  "scripts": {
    "test": "echo '"Error: no test specified'" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

我以前尝试过的：

这里奇怪的是，以前我有类似的项目，有类似的依赖项和配置，它运行得很好。

然后我尝试设置新的，首先我在main.js（React的初始渲染）上的这行出现了意外的令牌错误：

ReactDOM.render(<App />, document.getElementById('main'));

错误是由"（"引起的。然后Babelify上没有预设。

如果我只对预设进行"反应"，我会得到"ParseError:'import'和'export'可能只与'sourceType:module'一起出现"，因为，很好地导入。

问题：

  • 这是与Babelify有关，还是由其他模块或依赖关系引起
  • 这和巴别塔6有关吗
  • 为什么破折号导致错误
  • 我应该如何设置

在Babel 6.0.12版本中出现了一个错误，它将data-*标记呈现为对象键而不引用它们，导致JS语法无效。

你可以使用Babel的v6之前的版本，或者等待有人提交修复程序。

更新：

回购协议中刚刚对此进行了修复，因此将在下一版本中进行修复。

相关文章：