解析 JSON babel 失败时出错答案

【问题标题】：Error while parsing JSON babel failure解析 JSON babel 失败时出错
【发布时间】：2016-02-08 19:53:59
【问题描述】：

当我运行 gulp 时，我在解析 JSON 时出错：

Syntax Error 'C:\Path\main.js' Error while parsing JSON
at: 98
text: '{\r\n   "development":

“文本”在命令行中被截断。我尝试将输出通过管道传输到文件中，但由于文件中未显示错误而失败：

Powershell cmd

gulp | Out-File C:\temp.txt -width 120

package.json

{
  "name": "helloreact",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "babel": "^6.5.1",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "bootstrap": "^3.3.5",
    "flux": "^2.0.3",
    "gulp": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^2.2.0",
    "gulp-eslint": "^1.1.1",
    "gulp-open": "^1.0.0",
    "gulp-sourcemaps": "^1.6.0",
    "jquery": "^2.1.4",
    "jquery-csv": "^0.8.1",
    "lodash": "^4.0.1",
    "object-assign": "^4.0.1",
    "react": "^0.13.3",
    "react-router": "^0.13.3",
    "react-tools": "^0.10.0",
    "react-transform": "0.0.3",
    "reactify": "^1.1.1",
    "redbox-react": "^1.2.2",
    "toastr": "^2.1.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

.babelrc

{
  "env": {
    "development": {
      "plugins": ["react-transform"],
      }
    }
  }
}

我的 gulp 任务使用 babelify

gulp.task('js', function(){
  browserify(config.paths.mainJs,  { debug: true })
      .transform(babel, {presets: ["react"]})
      .transform(reactify)
      .bundle()
      .on('error', console.error.bind(console))
      .pipe(source('bundle.js'))
      .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(sourcemaps.write('./'))//TODO: not sure if this syntax is correct
      .pipe(gulp.dest(config.paths.dist + '/scripts'))
      .pipe(connect.reload())
});

【问题讨论】：

标签： reactjs gulp babeljs

【解决方案1】：

尝试删除 bablerc 中多余的逗号

{
  "env": {
    "development": {
      "plugins": ["react-transform"]
      }
    }
  }
}

【讨论】：

你在正确的轨道上。这是 babelrc 的问题。问题是当我更改我的 babelrc 文件时，我收到一条错误消息，提示找不到 jQuery。只有当我使用 babel 构建时才会发生这种情况。
我将 .babelrc 文件修改为 { "presets": ["react"] }，现在可以正常使用了。

【解决方案2】：

我的情况是：react + redux 项目。我的原始 .babelrc 内容是

{
  "presets" : ["es2015","react"]
}

我从预设中删除“es2015”并且 webpack 正常工作

【讨论】：