Question

我使用Gulp作为任务管理器和Babel将我的ES6程序转换为浏览器可理解的版本，而不是Node！

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'))
);

并在src/app.js我有：

import { square, diag } from 'lib';
//Some code here....

但是，当我运行gulp时，它会在dist中创建一个文件，但会将import文件中的app.js转换为require关键字，这是不可理解的浏览器......我认为bable会将imported中的src/app.js个文件合并到dist

中的一个文件中

如何将我的库代码转换为使用Babel的浏览器支持？

Answer 1

Babel的工作是 transile 。组合和缩小脚本是一项单独的任务。

您需要添加Browserify，Webpack，RequireJS或类似内容，然后告诉Babel您正在使用的内容，以便它发出代码以供使用那些。关于the setup page的一些进一步信息。

Answer 2

基本上Babeljs将您的ES6转换为ES5，想象一下您有一个ES6代码：

const secret = ({ msg = 'es 6 hey!'} = {}) => () => msg;

以上代码在ES6中，Babeljs将帮助您将其转换为ES5：

'use strict';

var secret = function secret() {
  var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

  var _ref$msg = _ref.msg;
  var msg = _ref$msg === undefined ? 'es 6 hey!' : _ref$msg;
  return function () {
    return msg;
  };
};

并且require不是 [current] JavaScript标准，您需要一个第三方库，它也有一个名为require的函数，像{{3}这样的库}，requirejs等

即使您在使用browserify（在线ES6到ES5转换器）时有一个包含任何export或import个关键字的ES6程序，它也会通知您转换的那些浏览器不支持关键字：

浏览器不支持
require，需要一个commonjs 环境，如node.js / io.js，browserify / webpack等

Babili

Babel不会将ES6转换为浏览器可以理解的JavaScript

2 个答案: