Question

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

我摆脱了大部分问题，但现在我得到了＃34;意想不到的令牌＆＃34; 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'));

错误是由＆＃34;（＆＃34;。然后Babelify没有预设。

如果我只有＆＃34;反应＆＃34;在预设中，我得到了＆＃34; ParseError：＆＃39; import＆＃39;和＆＃39;出口＆＃39;可能只出现在＆source; sourceType：module＆＃39;＆＃34;，因为，导入良好。

问题：

这是与Babelify相关还是由其他模块或依赖引起的？
这与Babel 6有关吗？
为什么破折号导致错误？
我该如何设置？

Answer 1

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

您可以使用pre-v6版本的Babel，或者等待有人提交修复程序。

更新：

这个问题的修复刚刚进入了回购，所以这将在下一个版本中修复。

为什么＆＃34; - ＆＃34; （破折号）给出＆＃34;意外的令牌错误＆＃34;关于Babelify与Gulp？

1 个答案: