javascript - 在 Babel 中使用 es7 函数

标签 javascript gulp browserify babeljs ecmascript-2016

我想在我的项目中包含 es7 函数以开始在其中使用 fetch await 异步方式。

我正在使用 gulp、browserify 和 babelify (7.2.0),阅读一些文档我看到说 babelify 使用 es7 函数的方式是将这一行包含到 babelify 转换中:

optional: ['runtime', 'es7.asyncFunctions']

所以我的整个 gulp 任务如下:

gulp.task('js',function(){



var bundleStream = browserify({

    entries:[config.paths.mainJs],
    debug: true,

    transform: [babelify.configure({
        presets:["es2015","react"],
        optional: ['runtime', 'es7.asyncFunctions']
    })]


}).transform("browserify-shim")
    .bundle()
    .on('error',console.error.bind(console))




bundleStream
    .pipe(source('compiled.js'))
    .pipe(buffer())
   // .pipe(uglify())
    .pipe(rename('compiled.min.js'))
    .pipe(gulp.dest(config.paths.dist + '/js'))


});

不幸的是,我在运行任务时遇到以下错误:

“未知选项:base.optional while parsing file:”

谷歌搜索了一下,我看到 babelify 7.x 确实使用了 babel 6.0,显然这个可选参数在 babel 6.0 中不再存在。

我不想降级我的 babelify 版本来完成这项工作,而是我想在 babelify 版本 7 中包含 es7 函数,有人知道该怎么做吗?

任何帮助将不胜感激,因为那里没有太多关于它的信息

以防万一,请同时找到我的 package.json 文件:

"dependencies": {
"bootstrap": "^3.3.5",
"history": "^1.13.0",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.4",
"jquery.easing": "^1.3.2",
"moment": "^2.10.2",
"react": "^0.14.3",
"react-bootstrap": "^0.28.1",
"react-dom": "^0.14.3",
"react-router": "^1.0.2",
"reflux": "^0.3.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babelify": "^7.2.0",
"browserify": "^9.0.8",
"browserify-shim": "^3.8.11",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-connect": "^2.2.0",
"gulp-open": "^1.0.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.1",
"jest-cli": "^0.8.0",
"reactify": "^1.1.0",
"regenerator": "^0.8.42",
"streamify": "^0.2.5",
"uglify-js": "^2.4.20",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.1.2"
 },
"browser": {
"jquery": "src/main/webapp/js/libs/jquery-1.11.1.min.js",
"x": "./vendor/x.js"
 },
"browserify": {
"transform": [
  "browserify-shim"
]
 },
 "browserify-shim": {
   "jquery": "$"
   }

最佳答案

optional: ['runtime', 'es7.asyncFunctions']

是你配置 Babel 5 的方式。你正在使用 Babel 6,所以它会是

plugins: ['transform-runtime', 'transform-async-to-generator']

需要注意的是,不推荐通过 Babelify 配置 Babel。相反,最好在应用程序的根目录中创建一个包含 JSON 的 .babelrc 文件,例如

{
  presets:["es2015","react"],
  plugins: ['transform-runtime', 'transform-async-to-generator']
}

npm install --save-dev babel-plugin-transform-runtime babel-plugin-transform-async-to-generator

关于javascript - 在 Babel 中使用 es7 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34697596/

相关文章:

gulp - 有没有办法在没有 package.json 的情况下使用 browserify-shim?

javascript - 跨域网址

javascript - jquery 是 (":focus")在 safari 中无法工作。此 IF($(this).parents ('form' ).find ('.back' ).is( ":focus") ) 的任何解决方案

gulp-imagemin:缩小 0 个图像?

javascript - 使用 gulp 检测文件更改

javascript - 前端项目使用 npm 时避免 bundle 中的重复模块

javascript - react native 预加载 ListView 中的所有图像

javascript - 如何在js中创建多行字符串

laravel - 在 Laravel Elixir 5.2 上调用任务之前检查文件是否存在

javascript - 使用 Browserify API,在本地文件上使用 require 和排除