スポンサーサイト

  • 2017.12.27 Wednesday

一定期間更新がないため広告を表示しています

  • 0
    • -
    • -
    • -

    VSCode + ES2015 + Babel + Webpack 環境構築編

    • 2017.12.11 Monday
    • 17:31

    JUGEMテーマ:ITメモ

     

     

    今回は普段使用しているWebフロント環境を披露したいと思います。

     

    ES6(ES2015)になってからJavaScriptにオブジェクト指向の考えが付与され

    大人数での開発がかなりやりやすくなってきました。

    しかしまだまだES6が標準で使えないブラウザ環境も多く残ってます。

     

    そこでBabelというツールを用いれば、ES6で書かれたソースをES5に変換してくれます。

    将来的にはこの変換をなくせば、そのままフロント開発でソースを使えるためすごく便利です。

    まだレガシーコードを書いている皆様も是非ES6を使ってみましょう!

     

    今回は執筆時に私が使用している環境で構築していきます。

    Windows:7 Professional

    VSCode:1.15.1

    Webpack:3.3.0

     

    それでは環境構築を始めていきましょう!

     

     

     

    • Node.js をインストール

    Babel や Webpack といったモジュールはドンドン進化していきます。

    毎回手動でアップデートの確認やバージョンを開発者全員で合わせるのは一苦労です。

    なので Node Package Manager 通称 npm と呼ばれる名前通りのパッケージ管理ツールを使います。

     

    ここからダウンロードしてインストールしてください。

    インストール方法は簡単なので割愛します。

     

    インストールできたら「コマンドプロンプト」を起動して下記コマンドを打ってください。

    無事にバージョン情報がでてきたらインストール完了です。

     

    npm -v
    

     

    • ディレクトリの作成

    次に今回環境構築するにあたり作業用のディレクトリを作成します。

    私はデスクトップに「sample」というフォルダを作成しました。

     

    VSCodeを起動して左上のメニューから「ファイル」→「フォルダーを開く」→「上記で作成したフォルダを選択」→「フォルダーの選択」を選んで空のフォルダを開いてください。

     

    • プロジェクトの新規作成

    VSCodeを開いたままでControl + ` を実行しターミナルを表示し下記コマンドを入力してください

    npm init -y
    

    -y は全て初期値で設定ファイルを作ってくれるオプションです。

    詳しくはこちら

    オプションを付けない場合、対話式で色々入力しないといけなくなります。

     

    • 必要なモジュールをnpmでインストール

    先ほどの「プロジェクトの新規作成」を実行するとフォルダ内に package.json というファイルが作成されています。

    このファイルを他の開発者に渡してターミナルに下記コマンドを打つと全く同じnpmのパッケージ類を構築可能になる便利なファイルです。

    npm install
    

    では必要なパッケージ類をインストールしていきます。

    ターミナルに下記コマンドを入力してください。

    npm install --save-dev webpack webpack2-polyfill-plugin cross-env
    
    npm install --save-dev babel-loader babel-polyfill babel-preset-env babel-core babel-cli babel-plugin-transform-runtime babel-register
    

    --save-devのオプションをつけると package.json の devDependencies に該当のパッケージが記載されます。

    この devDependencies に記載されている内容でnpm installを実行すると同じ環境が作れるという仕組みです。

     

    --save-devの後にスペース区切りで記載されているのが各種パッケージです。

    今回はパッケージの説明は省略させて頂きます。

    どんなパッケージなのか気になる方は、調べてみてください。

     

    • サンプルで使用するHTMLとJSファイルの作成

    VSCodeの上部メニューから「ファイル」→「新規ファイル」を選択し、index.htmlとtest_es6.jsとmain_es6.jsを作成してください。

    今回は二つの数値から四則演算をコンソールに表示するというサンプルにしてみます。

    各種ファイルの内容は下記をコピペするか、自分で自作してみてください。

     

    「index.html」

    
    <!DOCTYPE html>
    <html lang="ja-jp">
    <head>
    <meta charset="UTF-8">
    <script src="bundle.js"></script>
    <title>ES6のテスト</title>
    </head>
    <body>
    </body>
    </html>
    
    

     

    「test_es6.js」

    
    export default class TestClass {
    /**
    * @class 環境構築用テスト四則演算クラス
    * @constructor
    * @param {Number} [firstNumber=0] - 四則演算を行いたい1個めの数値
    * @param {Number} [secondNumber=0] - 四則演算を行いたい2個めの数値
    * 
    * @author arscelsus 山本
    **/
    constructor(firstNumber = 0, secondNumber = 0) {
    /** 
    * 四則演算を行いたい1個めの数値を格納
    * @member {Number}
    * @const
    * */
    this.FIRST_NUMBER = firstNumber;
    /** 
    * 四則演算を行いたい2個めの数値を格納
    * @member {Number}
    * @const
    * */
    this.SECOND_NUMBER = secondNumber;
    }
    /**
    * 足し算処理
    * @returns {Number} 結果の数値
    */
    addition() {
    return this.FIRST_NUMBER + this.SECOND_NUMBER;
    }
    /**
    * 引き算処理
    * @returns {Number} 結果の数値
    */
    subtraction() {
    return this.FIRST_NUMBER - this.SECOND_NUMBER;
    }
    /**
    * 掛け算処理
    * @returns {Number} 結果の数値
    */
    multiplication() {
    return this.FIRST_NUMBER * this.SECOND_NUMBER;
    }
    /**
    * 割り算処理
    * @returns {Number} 結果の数値
    */
    division() {
    return this.FIRST_NUMBER / this.SECOND_NUMBER;
    }
    }
    
    

     

    「main_es6.js」

    
    'use strict';
    import Test from './test_es6';
    const testClass = new Test(2, 2);
    console.log("足し算の結果:" + testClass.addition());
    console.log("引き算の結果:" + testClass.subtraction());
    console.log("掛け算の結果:" + testClass.multiplication());
    console.log("割り算の結果:" + testClass.division());
    
    

     

    • babelの設定

    このままでもindex.htmlの読み込むJSをmain_es6.jsに変更してもらえれば最新のChrome等の対応ブラウザであれば動きます。

    しかし古いIEなどでも動くようにトランスパイルしてくれるBabel様に変換してもらうための設定を行います。

    またまたVSCodeの上部メニューから「ファイル」→「新規ファイル」を選択し、.babelrcを作成してください。

    またまたファイルの内容は下記をコピペしてください。

    
    {
    "presets": [
    [
    "env",
    {
    "targets": {
    "ie": 9
    },
    "modules": false
    }
    ]
    ]
    }
    
    

    ターゲットをIE9でもいけるように設定してますが、ここは皆さんの環境に合わせて書き換えてください。

    オプションの指定など、詳細はこちらを確認してください。

     

    • webpackの設定

    次にこのBabelを動かし、importしているものを一つのJSに纏めくれる便利ツールWebpackの設定ファイルを作成していきます。

    Webpackの素晴らしさ等は先人の皆様が語ってくださっているので割愛します。

    またまたまたVSCodeの上部メニューから「ファイル」→「新規ファイル」を選択し、webpack.config.jsを作成してください。

    またまたまたファイルの内容は下記をコピペしてください。

    
    require('babel-polyfill');
    const webpack = require("webpack");
    const Webpack2Polyfill = require("webpack2-polyfill-plugin");
    const DEBUG = !process.argv.includes('--env.production');
    const plugins = [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new Webpack2Polyfill()
    ];
    if (!DEBUG) {
    plugins.push(
    new webpack.optimize.UglifyJsPlugin({}),
    new webpack.optimize.AggressiveMergingPlugin()
    );
    }
    module.exports = {
    entry: {
    'bundle': './main_es6.js',
    },
    output: {
    path: __dirname,
    filename: "bundle.js"
    },
    module: {
    rules: [
    {
    test: /es6¥.js$/,
    use: 'babel-loader',
    exclude: /node_modules/
    }
    ]
    },
    plugins: plugins
    };
    
    

    pluginの値を上記のように設定しておくと事項で設定するScriptの内容を書き換えるだけで

    開発中はUglifyせずに作成、リリース時はUglifyして作成というのが簡単に実行できるようになります。

    その他のプラグインや設定内容は本家のサイトを熟読されるか先人たちの解説サイトを検索してみてください。

    本家説明サイト

     

    • package.jsonの修正

    最後に package.jsonに下記を追加してください。

    
    "scripts": {
    "pro": "webpack --env.production",
    "dev": "webpack --env"
    },
    
    

    そしてVSCodeのターミナルで下記を実行してください。

    ※devの部分をproに変更するとUglifyされて難読化、圧縮されたJSファイルが作成されます。

    npm run dev
    

    無事にbundle.jsが作成されれば完成です。

     

     

    上手く動かない部分やおかしい点があればコメントにてお知らせください。

    スポンサーサイト

    • 2017.12.27 Wednesday
    • 17:31
    • 0
      • -
      • -
      • -
      コメント
      コメントする








          

      PR

      calendar

      S M T W T F S
          123
      45678910
      11121314151617
      18192021222324
      25262728293031
      << August 2019 >>

      オススメ情報

      selected entries

      categories

      archives

      links

      profile

      search this site.

      others

      mobile

      qrcode

      powered

      無料ブログ作成サービス JUGEM