web-dev-qa-db-ja.com

Webページ内でECMAScript6モジュールを使用する方法

ECMAScript 6の機能をBabeljs経由で使用できることに非常に興奮しています。特に、新しいモジュール機能を使用して、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>

ありがとうございました

javascriptecmascript-6babeljs
29
wmock

モジュールを使用しない場合：モジュール（インポート/エクスポート）を使用しない場合は、コードを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、インクルード<script src="es5.js"></script>コンソールに以下を出力します：

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

モジュールの使用：モジュールを使用している場合（lib.jsおよび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
23
trekforever

私は同じことを試すことから始めましたが、最終的にGulpが本当に多くのことを助けてくれることがわかりました。

覚えておくべきこと：babel source.js > destination.jsは新しいES6構文をポリフィルしません。現在のコードでは、letステートメント、非構造化代入、ジェネレーター関数などを使用していません。しかし、それを後で追加する場合は、より高度な変換が必要になります。

Gulpファイルの設定方法を説明する回答は次のとおりです。 Javascript 6to5（現在のBabel）エクスポートモジュールの使用法 （免責事項：これは私の回答の1つです：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>

追加されたポリフィルに加えて良い点は、コードが縮小され、ソースマップが得られることです。つまり、開発者ツールでも、ES6コード自体をデバッグできます。

注：使用しているインポート文はES6ドラフト仕様によれば正しいものですが、Babelはそれを好みません。 ./を追加して、次のようにする必要があります。

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

これは、変換がNode.jsで発生し、ファイルとノードモジュールが区別されるためと考えられます。補足として、ノードのES6を作成するには、importステートメントを使用する必要があります:)

2
Andrew Odri

[注：babeljsを介してES6モジュールを使用するという質問者の意図を完全に反映していないため、私の回答は貧弱ですフロントエンドのワークフローで。ウェブページ内でES6モジュールを使用したい人のために、彼女の答えを守ってください]

jspm.io を使用して、事前にbabelをトランスパイルせずにブラウザーにES6モジュールをロードしてみてください。プランカーが見つかります ここ

jspmは、任意のモジュール形式（ES6、AMD、CommonJS）のローダーになることを試みる system.js の上で動作します。

これを私のブラウザーで機能させるために、私は this jspm ES6 demo に基づいています。 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>

プランカーが見つかります ここ

2
AardVark71

--modulesスイッチの1つは、--scriptフラグがブラウザJSにコンパイルされるのと同じ方法で、Webページに直接含めることができるJSにコンパイルされますか（--scriptは、モジュール）？ https://github.com/google/traceur-compiler/wiki/Options-for-Compiling を参照してください

0
user5321531