Go to Qiita Advent Calendar 2024 Top
LoginSignup
22
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@standard-software(satoshi yamamoto)

JavaScript Babel/BrowserifyでES2015/ES2016/ES2017がIE11でも動くようにする

Last updated at Posted at 2018-02-27

Babelのコマンドラインと、Browserifyを使って、ES2015/ES2016/ES2017のJavaScriptが大体全部が、IE11でも動くようにして動作確認を行いました。

requireを1箇所つかうだけなので、Browserify じゃなくて WebPack でもいいと思うので、お得意な方はそちらで使ってください。

対象

Windows環境ですが、たぶん Macでも使えます。

ES2015/ES2016/ES2017 を Chrome と Firefox で動作確認する

2018/02/27現在の Win版Chrome と Firefox では、Babel変換しなくても全部動いてます。その動作確認を次のファイルによって行います。

index.htmlをブラウザで開くと、エラーもなく[test finish]とメッセージが表示されれば、動作確認完了です。

IE11では当然エラーになります。EdgeはローカルファイルやローカルWebサーバーではセキュリティの関係なのか動かないので、試してません。(たぶん動く)

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>

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

  </head>
  <body>
  </body>
</html>

次のファイルは長いですが、ES2015/2016/2017の動作を確認するためです。コピペで利用してください。

index.js
"use strict";

  var isObject = function(value) {
    if (
      (Object.prototype.toString.call(value) === '[object Object]')
      && (!Array.isArray(value))
      && (value !== null)
      && (typeof value !== 'undefined')
    ) {
      return true;
    }
    return false;
  };

  var check = function(a, b, message) {
    if (a === b) {
      return true;
    }
    if ((typeof message === 'undefined')
    || (message === null)) {
      message = '';
    } else {
      message = 'Test:' + message + '\n';
    }
    message = message +
        'A != B' + '\n' +
        'A = ' + a + '\n' +
        'B = ' + b;
    alert(message);
    return false;
  };

  //オブジェクトを文字列化する関数
  //JSON.stringify を利用して
  //  {valueA: 123, valueB: "123"}
  //という形式の文字列を作成する
  var objToString = function(obj) {
    var items = JSON.stringify(obj).split(',');
    items = items.map(function(element, index, array) {
      return element.replace(/(.+:)(.*)/,
        function(string, capture1, capture2) {
          return capture1.replace(/\"/g, '') + capture2;
        }).replace(/:/g, ': ');
      //[:]の前後でcapture1/2に分割して、
      //その後に[:]の前だけ["]を削除して
      //[:]は[: ]に置換
    });
    return items.join(', ');
    //[,]は[, ]に置換
  };

  var test_objToString = function() {
    check('{valueA: 123, valueB: "123"}',
      objToString({valueA:123, valueB:"123"}));
  }
  test_objToString();

  var consoleExt = {};
  consoleExt.originalConsoleLog = console.log;
  consoleExt.result = '';
  consoleExt.delimiter = ';';
  consoleExt.logOutput = true;

  consoleExt.log = function(message) {
    if (consoleExt.logOutput) {
      consoleExt.originalConsoleLog(message);
    }
    if (isObject(message)) {
      consoleExt.result += objToString(message) + consoleExt.delimiter;
    } else {
      consoleExt.result += message + consoleExt.delimiter;
    }
  };

  consoleExt.hook = function() {
    if (consoleExt.originalConsoleLog === console.log) {
      console.log = consoleExt.log;
    }
  };
  consoleExt.unhook = function() {
    if (consoleExt.originalConsoleLog !== console.log) {
      console.log = consoleExt.originalConsoleLog;
    }
  };


  consoleExt.hook();
  consoleExt.logOutput = false;
  consoleExt.result = '';

//新しいJavaScriptの仕様の確認はここより下です

  //ES2015 let
  const test_let = () => {
    let a = 1;
    console.log(a);   //1
    {
      let a = 2;
      console.log(a); //2
    }
    console.log(a);   //1
  };
  test_let();
  check('1;2;1;', consoleExt.result);

  //ES2015 const
  consoleExt.result = '';
  const test_const = () => {
    let PI = 3;
    console.log(PI);    //3
    {
      const PI = 3.14;
      console.log(PI);  //3.14
    }
    console.log(PI);    //3
  };
  test_const();
  check('3;3.14;3;', consoleExt.result);

  //ES2015 class
  consoleExt.result = '';
  const test_class = () => {
    class ClassA {
      constructor(arg1) {
        this.prop1 = arg1;
      }
      method1() {
        return this.prop1 + ' ClassA.method1';
      }
      static method2() {
        return 'ClassA.method2';
      }
    }
    class ClassB extends ClassA {
      method1() {
        return this.prop1 + ' ClassB.method1';
      }
    }

    const classA = new ClassA('a');
    console.log(classA.method1());
    console.log(ClassA.method2());
    const classB = new ClassB('b');
    console.log(classB.method1());
    console.log(ClassB.method2());
  };
  test_class();
  check(
    'a ClassA.method1;' +
    'ClassA.method2;' +
    'b ClassB.method1;' +
    'ClassA.method2;' ,consoleExt.result);

  //ES2015 arrow function
  consoleExt.result = '';
  const test_arrowFunction = () => {
    let minus = (x, y) => { return x - y; };
    console.log(minus(3, 2));   //1
    let plus = (x, y) => x + y;
    console.log(plus(10, 20));  //30
    let plusOne = x => x + 1;
    console.log(plusOne(4));    //5
  };
  test_arrowFunction();
  check('1;30;5;', consoleExt.result);

  //ES2015 メソッド定義省略構文
    // メソッド定義 - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/Method_definitions
  consoleExt.result = '';
  const test_methodDefinition = () => {
    var obj = {
      foo0 : function (){return 0;},
      foo1(){return 1;},
      ["foo" + 2](){return 2;},
    };
    console.log(obj.foo0());  //0
    console.log(obj.foo1());  //1
    console.log(obj.foo2());  //2
  };
  test_methodDefinition();
  check('0;1;2;', consoleExt.result);

  //ES2015 分割代入
    // 分割代入 - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
  consoleExt.result = '';
  const test_destructuringAssignment = () => {
    let a, b;
    [a, b] = [1, 2]
    console.log(a);   //1
    console.log(b);   //2

    let c;
    [a, b, ...c] = [1, 2, 3, 4, 5];
    console.log(a);   //1
    console.log(b);   //2
    console.log(c.toString());  // c=[3,4,5]

    var x, y, z;
    c = [x, y, z];
    [a, b, ...c] = [1, 2, 3, 4, 5, 6];
    console.log(c.toString());  // c=[3,4,5,6]
    console.log(x);   //undefined
    console.log(y);   //undefined
    console.log(z);   //undefined
    //変数に入れたものの分割代入は不可

    let d;
    ({a=0, b, d} = {a:1, b:2})
    console.log(a);   //1
    console.log(b);   //2
    console.log(d);   //undefined

    ({a=0, b, d} = {b:2})
    console.log(a);   //0
    console.log(b);   //2
    console.log(d);   //undefined

    let e;
    ({a, b, d:e} = {a:1, b:2, c:3, d:4})
    console.log(a);   //1
    console.log(b);   //2
    console.log(e);   //4

    //入れ替え
    a = 2; b = 1;
    [a, b] = [b, a];
    console.log(a);   //1
    console.log(b);   //2

    var f = function() {
      return [1, 2, 3];
    };
    [a, , b] = f();
    console.log(a);   //1
    console.log(b);   //3

    const url = "https://developer.mozilla.org/en-US/Web/JavaScript";
    const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
    const [, protocol, fullhost, fullpath] = parsedURL;
    console.log(protocol);
    console.log(fullhost);
    console.log(fullpath);
  };
  test_destructuringAssignment();
  check(
    '1;2;' +
    '1;2;3,4,5;' +
    '3,4,5,6;undefined;undefined;undefined;' +
    '1;2;undefined;' +
    '0;2;undefined;' +
    '1;2;4;' +
    '1;2;' +
    '1;3;' +
    'https;developer.mozilla.org;en-US/Web/JavaScript;' +
  '', consoleExt.result);

  //ES2015 スプレッド演算子 配列展開
    // スプレッド演算子 - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator
  consoleExt.result = '';
  const test_spreadOperator = () => {
    const arr = [1, 2, 3]
    const f = function (x, y, z) {
      return x + y + z;
    };
    console.log(f(...arr));  //6  f(1,2,3) と同様の結果
    console.log([...arr, 4, 5].toString()); //1,2,3,4,5
  };
  test_spreadOperator();
  check('6;1,2,3,4,5;', consoleExt.result);

  //ES2015 可変長引数
    // Rest parameters - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters
  consoleExt.result = '';
  const test_variableLengthArgument = () => {
    var f = function (a, ...b) {
      return 'A:' + a.toString() + ' B:' + b.toString();
    }
    console.log(f(1, 2, 3));
  };
  test_variableLengthArgument();
  check('A:1 B:2,3;',consoleExt.result);

  //ES2015 デフォルト引数
    // デフォルト引数 - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/Default_parameters
  consoleExt.result = '';
  const test_defaultArgument = () => {
    function multiply(a, b = 1) {
      return a * b;
    }
    console.log(multiply(2,2));   //4
    console.log(multiply(2));     //2
  };
  test_defaultArgument();
  check('4;2;', consoleExt.result);

  //ES2015 Template String
    // テンプレート文字列 - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings
  consoleExt.result = '';
  const test_templateString = () => {
    const a = 'abc';
    const b = `123
      ${a}
      678`;
    console.log(b);   //123\n      abc\n      678
  };
  test_templateString();
  check('123\n      abc\n      678;', consoleExt.result);

  //ES2015 for of
    // for...of - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of
  consoleExt.result = '';
  const test_forOf = () => {

    let result = 0;
    let iterable = [10, 20, 30];
    for (const value of iterable) {
      result += value;
    }
    console.log(result);  //60

    result = '';
    iterable = "boo";
    for (const value of iterable) {
      result += value + '-';
    }
    console.log(result);  //b-o-o-

    result = '';
    iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
    for (let entry of iterable) {
      result += entry.toString();
    }
    console.log(result);  //a,1b,2c,3
    result = '';
    for (let [key, value] of iterable) {
      result += key + ':' + value + ' ';
    }
    console.log(result);  //a:1 b:2 c:3

    result = '';
    iterable = new Set([1, 1, 2, 2, 3, 3]);
    for (let value of iterable) {
      result += value;
    }
    console.log(result);  //123

  };
  test_forOf();
  check(
    '60;b-o-o-;a,1b,2c,3;a:1 b:2 c:3 ;123;'
    ,consoleExt.result);

  consoleExt.result = '';
  const test_generator = () => {
    let result = '';
    function* fibonacci() { // ジェネレーター関数
      let [prev, curr] = [1, 1];
      while (true) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
      }
    }
    for (let n of fibonacci()) {
      result += n.toString() + ' ';
      // 100でシーケンスを打ち切る
      if (n >= 100) {
        break;
      }
    }
    console.log(result);
  };
  test_generator();
  check('2 3 5 8 13 21 34 55 89 144 ;',consoleExt.result);

  // ES2015 Object.assign
  //   Object.assign() - JavaScript | MDN
  //   https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
  consoleExt.result = '';
  const test_objectAssign = () => {
    var obj = { a: 1 };
    var copy = Object.assign({}, obj);
    console.log(copy.a);  //1

    var o1 = { a: 1 };
    var o2 = { b: 2 };
    var o3 = { c: 3 };
    var obj = Object.assign(o1, o2, o3);
    console.log(Object.entries(obj).toString());    //a,1,b,2,c,3
    //targetオブジェクト自身が変化する
    console.log(Object.entries(o1).toString());     //a,1,b,2,c,3
    console.log(Object.entries(o2).toString());     //b,2
    console.log(Object.entries(o3).toString());     //c,3

    //プロトタイプチェーン上のプロパティや列挙不可能なプロパティはコピーされない
    var obj = Object.create({ foo: 1 }, { // fooは継承されたプロパティ
      bar: {
        value: 2  // barは列挙不可能なプロパティ
      },
      baz: {
        value: 3,
        enumerable: true  // bazは直接所有で列挙可能なプロパティ
      }
    });
    var copy = Object.assign({}, obj);
    console.log(Object.entries(copy).toString());   //baz,3

    //プリミティブ型はオブジェクトにラップされる
    var v1 = 'abc';
    var v2 = true;
    var v3 = 10;
    // var v4 = Symbol('foo');
    var obj = Object.assign({}, v1, null, v2, undefined, v3);
    console.log(Object.entries(obj).toString());  //0,a,1,b,2,c
  };
  test_objectAssign();
  check(
    '1;' +
    'a,1,b,2,c,3;' +
    'a,1,b,2,c,3;' +
    'b,2;' +
    'c,3;' +
    'baz,3;' +
    '0,a,1,b,2,c;' +
  '', consoleExt.result);

  //ES2015 Map
    // Map - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map
  consoleExt.result = '';
  const test_map = () => {
    var myMap = new Map();
    var keyString = "文字列",
        keyObj = {},
        keyFunc = function () {};
    // 値を設定する
    myMap.set(keyString, "'文字列' と関連付けられた値");
    myMap.set(keyObj, "keyObj と関連付けられた値");
    myMap.set(keyFunc, "keyFunc と関連付けられた値");
    console.log(myMap.size);    //3
    // 値を取得する
    console.log(myMap.get(keyString));      //'文字列' と関連付けられた値
    console.log(myMap.get(keyObj));         //keyObj と関連付けられた値
    console.log(myMap.get(keyFunc));        //keyFunc と関連付けられた値
    console.log(myMap.get("文字列"));       //'文字列' と関連付けられた値
    console.log(myMap.get({}));             //undefined
    console.log(myMap.get(function() {}));  //undefined

    var myMap = new Map();
    myMap.set(NaN, "not a number");
    console.log(myMap.get(NaN));        //not a number
    var otherNaN = Number("foo");
    console.log(myMap.get(otherNaN));   //not a number

    var result = '';
    var myMap = new Map();
    myMap.set(0, "zero");
    myMap.set(1, "one");
    for (var [key, value] of myMap) {
      result += key + " = " + value + ' ';
    }
    console.log(result);      //0 = zero 1 = one
    var result = '';
    for (var key of myMap.keys()) {
      result += key + ' ';
    }
    console.log(result);      //0 1
    var result = '';
    for (var value of myMap.values()) {
      result += value + ' ';
    }
    console.log(result);      //zero one
    var result = '';
    for (var [key, value] of myMap.entries()) {
      result += key + " = " + value + ' ';
    }
    console.log(result);      //0 = zero 1 = one

    var result = '';
    myMap.forEach(function(value, key) {
      result += key + " = " + value + ' ';
    }, myMap)
    console.log(result);      //0 = zero 1 = one

    var kvArray = [["キー1", "値1"], ["キー2", "値2"]];
    var myMap = new Map(kvArray);
    console.log(myMap.get("キー1"));              //値1

    console.log(([...myMap].toString()));         //キー1,値1,キー2,値2
    console.log(([...myMap.keys()].toString()));  //キー1,キー2

  };
  test_map();
  check(
    '3;' +
    "'文字列' と関連付けられた値;" +
    "keyObj と関連付けられた値;" +
    "keyFunc と関連付けられた値;" +
    "'文字列' と関連付けられた値;" +
    'undefined;' +
    'undefined;' +
    'not a number;' +
    'not a number;' +
    '0 = zero 1 = one ;' +
    '0 1 ;' +
    'zero one ;' +
    '0 = zero 1 = one ;' +
    '0 = zero 1 = one ;' +
    '値1;' +
    'キー1,値1,キー2,値2;' +
    'キー1,キー2;' +
  '', consoleExt.result);

  //ES2015 Iterator/Generator
    // JavaScript の ジェネレータ を極める！ - Qiita
    // https://qiita.com/kura07/items/d1a57ea64ef5c3de8528
  const test_iteratorGenerator = () => {
    consoleExt.result = '';
    var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    for(var num of ary) { console.log(num); }
    check('1;2;3;4;5;6;7;8;9;10;', consoleExt.result);

    consoleExt.result = '';
    function* gfn1(from, to){ while(from <= to) yield from++; }
    var g = gfn1(1, 10);
    for(var num of g) { console.log(num); }
    check('1;2;3;4;5;6;7;8;9;10;', consoleExt.result);

    consoleExt.result = '';
    function* gfn2(){
        var a = yield 0;
        yield* [1, a, 5];
    }
    var g = gfn2();
    console.log( g.next() );
    console.log( g.next(3) );
    console.log( g.next() );
    console.log( g.next() );
    console.log( g.next() );
    check(
      '{value: 0, done: false};' +
      '{value: 1, done: false};' +
      '{value: 3, done: false};' +
      '{value: 5, done: false};' +
      '{done: true};'
    , consoleExt.result);

    consoleExt.result = '';
    function* gfn3(n){
        n++;
        yield n;
        n *= 2;
        yield n;
        n = 0;
        yield n;
    }
    var g = gfn3(10);
    console.log( g.next() );
    console.log( g.next() );
    console.log( g.next() );
    console.log( g.next() );
    check(
      '{value: 11, done: false};' +
      '{value: 22, done: false};' +
      '{value: 0, done: false};' +
      '{done: true};'
    , consoleExt.result);

    consoleExt.result = '';
    function* gfn4(){
        var a = yield "first";
        var b = yield "second";
        yield a + b;
    }
    var g = gfn4();
    console.log( g.next() );
    console.log( g.next(3) );
    console.log( g.next(5) );
    console.log( g.next() );
    check(
      '{value: "first", done: false};' +
      '{value: "second", done: false};' +
      '{value: 8, done: false};' +
      '{done: true};'
    , consoleExt.result);

    consoleExt.result = '';
    function* gfn5(){
      yield* [1, 3, 5];
    }
    var g = gfn5();
    console.log( g.next() );
    console.log( g.next() );
    console.log( g.next() );
    console.log( g.next() );
    check(
      '{value: 1, done: false};' +
      '{value: 3, done: false};' +
      '{value: 5, done: false};' +
      '{done: true};'
    , consoleExt.result);

    consoleExt.result = '';
    function* gfn6(){
      yield* "あいう";
    }
    var g = gfn6();
    console.log( g.next() );
    console.log( g.next() );
    console.log( g.next() );
    console.log( g.next() );
    check(
      '{value: "あ", done: false};' +
      '{value: "い", done: false};' +
      '{value: "う", done: false};' +
      '{done: true};'
    , consoleExt.result);

    consoleExt.result = '';
    function* gfn7(){
        yield 1;
        yield* [2, 1, 2];
    }
    for(var num of gfn7()) console.log(num);
    check('1;2;1;2;', consoleExt.result);
    consoleExt.result = '';
    console.log( [...gfn7()] ); // [1, 2, 1, 2]
    check('1,2,1,2;', consoleExt.result);
    consoleExt.result = '';
    console.log( Math.max(...gfn7()) ); // 2
    check('2;', consoleExt.result);
    consoleExt.result = '';
    var [a, b, c, d] = gfn7();
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
    check('1;2;1;2;', consoleExt.result);
    consoleExt.result = '';
  };

  //ES2016 Exponentiation Operator (べき乗演算子)
    // 算術演算子 - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
  consoleExt.result = '';
  const test_exponentiationOperator = () => {
    console.log(2 ** 8);    //256
  };
  test_exponentiationOperator();
  check('256;', consoleExt.result);

  //ES2016 Array.includes
    // Array.prototype.includes() - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
  consoleExt.result = '';
  const test_arrayIncludes = () => {
    const arr = ['abc', 'def', 'ghi'];
    console.log(arr.includes('def'));
    console.log(arr.includes('abcd'));
  };
  test_arrayIncludes();
  check('true;false;', consoleExt.result);

  //ES2017 pasStart/padEnd
    // String.prototype.padStart() - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
  consoleExt.result = '';
  const test_padStartEnd = () => {
    console.log('abc'.padStart(5, '*') );
    console.log('abc'.padStart(10, 'def') );
    console.log('abc'.padEnd(5, '*') );
    console.log('abc'.padEnd(10, 'def') );
  };
  test_padStartEnd();
  check(
    '**abc;' +
    'defdefdabc;' +
    'abc**;' +
    'abcdefdefd;' +
  '', consoleExt.result);

  //ES2017 Object.values/entries
    // Object.values() - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values
  consoleExt.result = '';
  const test_objectValuesEntries = () => {
    console.log(Object.keys({a:1, b:2}).toString() );     //a,b
    console.log(Object.values({a:1, b:2}).toString() );   //1,2
    console.log(Object.entries({a:1, b:2}).toString() );  //a,1,b,2
  };
  test_objectValuesEntries();
  check(
    'a,b;' +
    '1,2;' +
    'a,1,b,2;' +
  '', consoleExt.result);

  //ES2017 Object.
    // Object.getOwnPropertyDescriptors() - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
  consoleExt.result = '';
  const test_objectGetOwnPropertyDescriptors = () => {
    const obj = { prop: 123 };
    console.log(
      Object.entries(
        Object.getOwnPropertyDescriptor(obj, "prop")
      ).toString());
    //value,123,writable,true,enumerable,true,configurable,true

    console.log(
      Object.entries(
        Object.getOwnPropertyDescriptors(obj).prop
      ).toString());
    //value,123,writable,true,enumerable,true,configurable,true
  };
  test_objectGetOwnPropertyDescriptors();
  check(
    'value,123,writable,true,enumerable,true,configurable,true;' +
    'value,123,writable,true,enumerable,true,configurable,true;' +
  '', consoleExt.result);

  //ES2017 Trailing commas in function parameter lists and calls
  consoleExt.result = '';
  const test_functionParamTrailingCommas = () => {
    const add = (
      x,
      y,
    ) => {
     return x + y;
    };
    console.log(add(10,20));  //30
  };
  test_functionParamTrailingCommas();
  check('30;', consoleExt.result);

  //ES2017 Async Functions
    // async function - JavaScript | MDN
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function
  consoleExt.result = '';
  const test_asyncFunction = async () => {
    (async () => {
      console.log('async start');
      await new Promise((resolve) => setTimeout(resolve, 1000));
      // 1秒後に実行される
      console.log('async end');

      check('async start;async end;', consoleExt.result);

    })().catch((error) => console.log(error));
  };
  test_asyncFunction();

  alert('test finish');

この2ファイルをフォルダごとバックアップとっておくと、変換後との差分がわかっていいかもしれません。

BabelとBrowserify環境構築

もちろん、node.js はインストールしておいてください。

インストール

Browserifyのグローバルインストール、Babelのローカルインストールをします。特定フォルダをカレントにして、次のコマンドを入れます。

> npm install -g browserify
> npm install --save-dev babel-cli
> npm install --save-dev babel-polyfill
> npm install --save-dev babel-preset-env

特定フォルダに作成される、package.json は次のとおり。(devDependenciesの欄だけみてください。他は気にしないで)

package.json
{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1"
  },
  "dependencies": {}

設定ファイル

次は、Babelのための設定ファイルを用意します。

.babelrc
{
  "presets": [
    ["./node_modules/babel-preset-env", {
      "targets": {
        "IE": "11"
      }
    }]
  ]
}

書き方がいろいろあるようで、正確なものがよくわからないのですが、とりあえずこのように書いて、カレントフォルダに配置してください。

HTMLファイル

次は、index.html を少し変更します。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>

<script src="output-build.js"></script>
<script>
var output = require('/output.js');
</script>

  </head>
  <body>
  </body>
</html>

output-build.js をリンクするようにして、requireで機能を呼び出すようにしています。

js ファイル

次は、index.js を少し変更します。

といっても、use strict行のあとに require を書くだけです。
(別にuse strict行の前でもいい気がしますが、なんとなく。)

index.js
"use strict";
require("babel-polyfill");  //追加行

これで準備が整いました。

トランスパイル

次のコマンドでBabelのトランスパイルをして、index.js を output.js に変換します。

> .\node_modules\.bin\babel index.js -o output.js

この状態で、ES201x が IE11で解釈されるものに変換されます。が、一部は babel-polyfill がないと動かないので、requireでモジュール結合して取り込むために Browserify を使います。

> browserify -r ./output.js -o ./output-build.js

これで、output.js にbabel-polyfill を取り込み、 output-build.js に変換しています。

これで、index.html と output-build.js の2つのファイルで、IE11でも ES2015/2016/2017 のJavaScriptが動くようになります。

あとがき

「新しい構文で書きたいけど、古い環境で動かないかどうかわからないから書けない。」と心配する気持ちがあると開発ははかどらないですよね。

新しい構文をしっかり動作確認してから開発にとりくみましょう。

参考

HTMLファイルだけでCDNでBabelをリンクしてES2015/2016/2017を動かす - Qiita
https://qiita.com/standard-software/items/f6c18fa6017fbb218cce

Babel コマンドライン変換環境構築 - Qiita
https://qiita.com/standard-software/items/4b712ede34c728dc3b08

JavaScript webpack+babel windows環境設定 - Qiita
https://qiita.com/standard-software/items/60915e40891f70d02ffd

22
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
22
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?