Category: babel

babel + webpack

webpack.config.js

const webpack = require('webpack');

module.exports = {
    target: 'node',
    entry: `./entry.js`,

    output: {
        path: `${__dirname}/output/`,
        filename: "main.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            }
        ]
    }
};

[vagrant@localhost front]$ npm run build

> @ build /home/vagrant/front
> webpack

Hash: eb8d6365b20e87793006
Version: webpack 4.41.2
Time: 421ms
Built at: 2019-11-20 13:15:11
1 asset
Entrypoint main = main.js
[0] ./entry.js 2 KiB {0} [built] [failed] [1 error]

WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /home/vagrant/front/entry.js: Cannot read property ‘bindings’ of null
at Scope.moveBindingTo (/home/vagrant/front/node_modules/@babel/traverse/lib/scope/index.js:822:13)
at BlockScoping.updateScopeInfo (/home/vagrant/front/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)
at BlockScoping.run (/home/vagrant/front/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)
at PluginPass.BlockStatementSwitchStatementProgram (/home/vagrant/front/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)
at newFn (/home/vagrant/front/node_modules/@babel/traverse/lib/visitors.js:179:21)
at NodePath._call (/home/vagrant/front/node_modules/@babel/traverse/lib/path/context.js:55:20)
at NodePath.call (/home/vagrant/front/node_modules/@babel/traverse/lib/path/context.js:42:17)
at NodePath.visit (/home/vagrant/front/node_modules/@babel/traverse/lib/path/context.js:90:31)
at TraversalContext.visitQueue (/home/vagrant/front/node_modules/@babel/traverse/lib/context.js:112:16)
at TraversalContext.visitSingle (/home/vagrant/front/node_modules/@babel/traverse/lib/context.js:84:19)
at TraversalContext.visit (/home/vagrant/front/node_modules/@babel/traverse/lib/context.js:140:19)
at Function.traverse.node (/home/vagrant/front/node_modules/@babel/traverse/lib/index.js:84:17)
at traverse (/home/vagrant/front/node_modules/@babel/traverse/lib/index.js:66:12)
at transformFile (/home/vagrant/front/node_modules/@babel/core/lib/transformation/index.js:119:29)
at runSync (/home/vagrant/front/node_modules/@babel/core/lib/transformation/index.js:48:5)
at runAsync (/home/vagrant/front/node_modules/@babel/core/lib/transformation/index.js:35:14)
at process.nextTick (/home/vagrant/front/node_modules/@babel/core/lib/transform.js:34:34)
at processTicksAndRejections (internal/process/task_queues.js:79:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/vagrant/.npm/_logs/2019-11-20T04_15_11_600Z-debug.log

webconfigで書くのはわかったけど、なんか上手くいかんな。。

babelとは?

ブラウザにまだサポートされていないようなJSの次世代標準機能をブラウザで使えるようにするNode.jsトランスパイラ
ES6, ES7など(ECMAScript)
Bableを使う際に書くのはAltJSではなく、純粋なJavaScript

Bable ES6の構文サポート
– Class, Template Strings, Arrow Function, Default Parameter, Rest Parameter, Property Literals, Modules

class Code {
    constructor(item){
        this.item = item;
    }
    showItem(){
        console.log(`you are buying ${this.item}`);
    }
}

class Sec extends Code {
    constructor(item = 'コロプラ'){
        super(item);
    }
}

var app = new Sec();
app.showItem();

[vagrant@localhost front]$ node entry.js
you are buying コロプラ

では、早速Babelをインストールしましょう。
$ npm install -g babel-cli
$ babel entry.js –out-file output.js

あれ、全然変わってない？
presetをインストールして、.babelrcを書く必要がある？？
$ npm install –save-dev babel-preset-env

.babelrc

{
   "presets": ["env"]
}

再度実行
$ babel entry.js –out-file output.js

output.js

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props&#91;i&#93;; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Code = function () {
    function Code(item) {
        _classCallCheck(this, Code);

        this.item = item;
    }

    _createClass(Code, &#91;{
        key: 'showItem',
        value: function showItem() {
            console.log('you are buying ' + this.item);
        }
    }&#93;);

    return Code;
}();

var Sec = function (_Code) {
    _inherits(Sec, _Code);

    function Sec() {
        var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'コロプラ';

        _classCallCheck(this, Sec);

        return _possibleConstructorReturn(this, (Sec.__proto__ || Object.getPrototypeOf(Sec)).call(this, item));
    }

    return Sec;
}(Code);

var app = new Sec();
app.showItem();

なるほど、OK!
ES5への変換は、babel-preset-envが必要ってことね。
そんで、これ、webpackとどう連携するの？