Vue.jsとwebpackとbabelを使う

フロントエンド界隈では、Vue.jsが大流行。

そこでVue.jsとクラスを使いたいのでbabelも採用し、それを最終的にwebpackを経由させてjsファイルを吐き出すということをやってみたい。

まずは、npmコマンドでVue.jsをインストール。

npm install vue

次に、webpackをインストール。

npm install --save-dev webpack

npm install --save-dev webpack-cli

最後に、core-jsとregeneratorをインストール。

npm install --save core-js@3.6.5 npm install --save regenerator

久しぶりにbabelを調べてみると、Babel 7.4.0から@babel/polyfillが非推奨になったとのこと。

代わりに、core-jsとregeneratorを使ってくれということになっていたので、今回、インストールしました。

// src/app.js
import Vue from "vue";
import "core-js/stable";
import "regenerator-runtime/rumtime";

class Hoge {
  constructor(){
    console.log("hoge")
  }
}

new Vue({
  el:'#foo',
  mounted:function(){
    console.log("foo")
  }
});

まず、ターミナルでjsのトランスフォームを行います。

regenerator src lib

最後に、webpackコマンドを叩けば完了です。

npx webpack --config webpack.config.js

//webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production' ,
  entry: path.resolve(__dirname, 'lib/app.js'),
  output: {
    filename: 'app.min.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}