0

我使用 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 的浏览器支持？

4

2 回答 2

3

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

你需要添加Browserify、Webpack、RequireJS或类似的东西，然后告诉 Babel 这就是你正在使用的东西，所以它会发出代码来使用它们。设置页面上的一些进一步信息。

于 2016-09-18T06:29:08.093 回答
1

基本上 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不是[当前] JavaScript 标准，您需要一个 3rd-party 库，该库也有一个名为 的函数require，诸如requirejs、browserify等库。

甚至，如果您在使用Babiliexport （在线 ES6 到 ES5 转换器）时有一个包含任何import关键字的 ES6 程序，它会通知您浏览器不支持这些转换后的关键字：

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

在线演示

于 2016-09-18T07:10:09.933 回答