javascript - 为什么 "-"(破折号)在带有 Gulp 的 Babelify 上给出 "Unexpected token error"？

Question

我正在使用 Browserify 和 Babelify 设置(或实际修改现有的)项目。出于某种原因，我无法正确配置我的 gulpfile。如果重要的话，项目本身就是一个 React 项目。

我摆脱了大部分问题，但现在我在 Browserify 上收到“意外 token ”错误。它是由具有破折号的属性名称的 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 的初始渲染)的这一行上遇到了意外的 token 错误:

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

错误是“(”引起的。然后Babelify上没有presets。

如果我只对预设有“ react ”，我会得到“ParseError:‘import’和‘export’可能只出现在‘sourceType:module’”，因为导入良好。

问题:

• 这是否与 Babelify 相关或是否由其他模块或依赖项引起？
• 这与 Babel 6 相关吗？
• 为什么 dash 会导致错误？
• 我该如何设置？

Answer 1

从 Babel 版本 6.0.12 开始似乎存在一个错误，它将 data-* 标签渲染为对象键而不引用它们，从而导致无效的 JS 语法。

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

更新:

此问题的修复程序刚刚 checkin repo 协议(protocol)，因此将在下一个版本中修复。