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

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 中创建一个文件，但会将 app.js 文件中的 import 转换为 require 浏览器无法理解的关键字...我认为 bable 会将 src/app.js 中的 imported 个文件合并到 dist

中的一个文件

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

Answer 1

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

您需要添加Browserify, Webpack, RequireJS, or similar, and then tell Babel that's what you're using so it emits code to use those. Some further information on 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 标准，你需要一个第三方库，它也有一个名为 [=12 的函数=]、requirejs, browserify 等库

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

require is not supported in the browser, you need a commonjs environment such as node.js/io.js, browserify/webpack etc

Online demo

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

Babel does not convert ES6 to JavaScript that is understandable by browsers

javascript

gulp

ecmascript-6

babeljs

gulp-babel