30

我对现在通过 Babeljs 使用 ECMAScript 6 功能感到非常兴奋 - 特别是，我很想开始使用新的模块功能使我的 JavaScript 代码更加模块化。

这是我到目前为止所写的：

// ECMAScript 6 code - lib.js
export const sqrt = Math.sqrt;
export function square (x) {
  return x * x;
}

export function diag (x, y) {
  return sqrt(square(x) + square(y));
}

// ECMAScript 6 code - main.js
import { square, diag } from 'lib';
console.log(square(11));
console.log(diag(4, 3));

我知道我可以通过命令行上的 babel 将此代码从 ES6 转换为 ES5：

babel lib.js > lib6to5.js
babel main.js > main6to5.js

但是我需要做什么才能在我的 HTML 中使用此代码？

例如，这个 index.html 文件会是什么样子：

<!-- index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECMAScript 6</title>

    <!-- What goes here? 
     How do I include main6to5.js and lib6to5.js to make this work in the browser? -->
    <script src="?????"></script>

  </head>
  <body>

  </body>
</html>

谢谢

4

4 回答 4

23

不使用模块： 如果您不使用模块（导入/导出），那么您可以简单地将代码转换为 ES5 并将这些 ES5 文件包含在您的 html 中。例子：

// ES6 - index.js
// arrow function
var result = [1, 2, 3].map(n => n * 2);
console.log(result);

// enhanced object literal
var project = "helloWorld";
var obj = {
    // Shorthand for ‘project: project’
    project,
    // Methods
    printProject() {
     console.log(this.project);
    },
    [ "prop_" + (() => 42)() ]: 42
};
console.log(obj.printProject());
console.log(obj);

转译为 es5：babel index.js > es5.js

在index.html, include<script src="es5.js"></script> 会在控制台打印出以下内容：

[2,4,6]
helloWorld
{"project":"helloWorld","prop_42":42}

使用模块：现在，如果您使用模块（使用lib.jsand的情况main.js），在将您的代码转换为 ES5 之后，您还必须捆绑它们（从 AMD/CommonJS/Modules 到您的浏览器可以理解的代码）。您可以使用gulp、webpack、browserify等各种构建系统来完成此操作。我将在此处使用 browserify 作为示例。

假设我的文件夹结构如下所示：

es6
|- src
  |- lib.js
  |- main.js
|- compiled
|- index.html

我运行 babel 将我的文件转译/src到/compiled文件夹：babel src --out-dir compiled.

现在我在编译文件夹中有我的 ES5 代码。我在 cmd 行中安装 browserify，然后将我的 main.js（入口点）捆绑在我的编译文件夹中

~/es6 » npm install --global browserify
~/es6 » browserify ./compiled/main.js -o ./bundle.js

现在我有bundle.js它看起来像这样：

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";

exports.square = square;
exports.diag = diag;
var sqrt = exports.sqrt = Math.sqrt;

function square(x) {
    return x * x;
}

function diag(x, y) {
    return sqrt(square(x) + square(y));
}

Object.defineProperty(exports, "__esModule", {
    value: true
});
},{}],2:[function(require,module,exports){
"use strict";

var _lib = require("./lib");

var square = _lib.square;
var diag = _lib.diag;

console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
},{"./lib":1}]},{},[2]);

然后在你的 index.html 中：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECMAScript 6</title>

    <script src="./bundle.js"></script>

  </head>
  <body>

  </body>
</html>

然后只需打开您的index.html，您的控制台应该会为您提供以下信息：

 121           bundle.js:27
 5             bundle.js:28
于 2015-03-03T09:12:31.800 回答
2

[注意：我意识到我的回答很差，因为它没有完全反映提问者在前端工作流程中通过 babeljs 使用 ES6 模块的意图。为那些想要在网页中使用 ES6 模块的人保留答案]

尝试使用jspm.io在浏览器中加载 ES6 模块，而无需预先使用 babel 进行转译。可以在这里找到一个 plunker

jspm 工作在system.js之上，它试图成为任何模块格式（ES6、AMD、CommonJS）的加载器。

为了在我的浏览器中完成这项工作，我基于这个 jspm ES6 演示。只需将System.js和es6-module-loader.js复制到 js/lib 文件夹中，并将您的 es6 js 文件复制到 js 文件夹中。然后html看起来像这样：

<html>
    <body>
        Test .. just open up the Chrome Devtools console to see the ES6 modules output using jspm
        <script src="js/lib/system.js"></script>
        <script>System.import("main");</script> </body>
</html>

可以在这里找到一个 plunker

于 2015-02-27T13:10:05.757 回答
2

我开始尝试同样的事情，但最终发现 Gulp 确实帮了很多忙。

要记住的一件事：babel source.js > destination.js不会 polyfill 新的 ES6 语法。您的代码现在没有使用任何let语句、解构赋值、生成器函数或类似的东西；但如果您在稍后阶段添加它，您将需要更复杂的转换。

这是一个解释如何设置 gulp 文件的答案：Javascript 6to5 (now Babel) export module usage（免责声明：这是我的答案之一：P）

以下是针对您的案例的具体步骤：

  1. 在您的目录中创建一个名为的文件gulpfile.js，其中包含以下内容：
var gulp = require('gulp');
var browserify = require('browserify');
var babelify= require('babelify');
var util = require('gulp-util');
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('build', function() {
  browserify(['./lib.js', './main.js'], { debug: true })
  .add(require.resolve('babel/polyfill'))
  .transform(babelify)
  .bundle()
  .on('error', util.log.bind(util, 'Browserify Error'))
  .pipe(source('app.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(uglify({ mangle: false }))
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./'));
});

gulp.task('default', ['build']);
  1. 运行npm install gulp browserify babel babelify gulp-util vinyl-buffer vinyl-source-stream gulp-uglify gulp-sourcemaps以安装所需的依赖项。
  2. 运行gulp将所有内容捆绑在一起。
  3. 将 HTML 中的捆绑脚本与此元素一起使用：<script src="app.js"></script>

除了添加 polyfill 之外，还有一个好处是代码被缩小了，并且您可以获得源映射，这意味着即使在您的开发人员工具中，您也可以调试 ES6 代码本身。

注意：虽然根据 ES6 草案规范，您使用的 import 语句是正确的，但 Babel 不会喜欢它。您需要添加一个./，使其看起来像这样：

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

我怀疑这是因为转换发生在 Node.js 中，这将文件与节点模块区分开来。顺便说一句，您可以使用 import 语句为 node 编写 ES6 do requires :)

于 2015-03-03T17:49:41.880 回答
0

开关之一是否会--modules编译成可以直接包含在网页中的 JS，就像--script标志将编译成浏览器 JS（--script不能与模块一起使用）一样？请参阅https://github.com/google/traceur-compiler/wiki/Options-for-Compiling

于 2015-03-06T10:18:31.130 回答