为什么"-“(破折号)在Babelify和Gulp上出现了”意外的象征性错误“？

Question

我正在使用Browserify和Babelify建立(或实际上修改现有的)项目。由于某些原因，我无法正确配置我的吞咽文件。如果重要的话，项目本身就是一个反应项目。

我已经解决了大部分问题，但是现在我在Browserify上得到了“意想不到的令牌”错误。它是由具有破折号的属性名称的React组件或html元素引起的，即。以下内容如下：

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

我的Browserify任务：

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'));

这个错误是由"(“)引起的。然后就没有预先设定的巴别化了。

如果我只有预置的"react“，我会得到"ParseError：‘导入’和‘导出’可能只出现在'sourceType:模块‘，因为，很好的导入。

问题：

• 这是与Babelify相关的，还是由其他模块或依赖引起的？
• 这和Babel 6有关吗？
• 为什么破折号会导致错误？
• 我该怎么安排这个？

Answer 1

在Babel版本6.0.12中似乎有一个bug，它将data-*标记作为对象键而不引用它们，从而导致无效的JS语法。

您可以使用预V6版本的Babel，或者等待某人提交修补程序。

更新：

这方面的修补程序刚刚被签入回购程序，因此这将在下一个版本中得到修复。