ECMAScript2015(es6)の基本的な開発環境 ref: http://qiita.com/hiroykam/items/135c51310087182b03cb

app.js

"use strict";

import ReadCsv from "./read-csv";

class MyApp {
    static exec() {
        const obj = new MyApp();
        obj.prepareReadCsv();
    }

    prepareReadCsv() {
        const targets = document.querySelectorAll(".js-csv-read");
        if (targets) {
            const ts = new ReadCsv(targets);
        }
    }
}

MyApp.exec();

file12.txt

$ npm install --save-dev webpack babel-loader babel-core babel-preset-es2015

file18.txt

$ npm run build

file19.txt

$ npm install --save-dev browser-sync browser-sync-webpack-plugin

file20.txt

$ npm install --save-dev uglify-js

file22.txt

$ npm run watch

file23.txt

$ npm run watch

file24.txt

$ npm install

file25.txt

$ npm install --save-dev webpack-dev-server

file28.txt

$ npm run dev

file29.txt

$ brew install yarn --ignore-dependencies

file8.txt

$ npm init
$ npm install -g webpack

index.html(圧縮前のjsを利用)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>はじめてのES6</title>
</head>
<body>
<div style="margin: 20px" class="js-csv-read">
    <div style="color: red" class="js-message"></div>
    現在<span class="js-csv-count"></span>件登録されています<br>
    <textarea style="height: 30px" class="js-csv-data" readonly maxlength="3"></textarea>
    <br>
    <input type="button" class="js-csv-clear" value="クリア">
    <input type="file" class="js-csv-file">
</div>
<div style="margin: 20px" class="js-csv-read">
    <div style="color: red" class="js-message"></div>
    現在<span class="js-csv-count"></span>件登録されています<br>
    <textarea style="height: 50px" class="js-csv-data" readonly maxlength="5"></textarea>
    <br>
    <input type="button" class="js-csv-clear" value="クリア">
    <input type="file" class="js-csv-file">
</div>
<footer>
<script type="text/javascript" src="bundle.js"></script>
</footer>
</body>
</html>

package.json

{
  "name": "base",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p",
    "watch": "webpack  --progress --colors --watch",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "browser-sync": "^2.18.13",
    "browser-sync-webpack-plugin": "^1.2.0",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  }
}

read-csv.js

"use strict";

export default class ReadCsv {
    constructor(targets) {
        this.targets = targets;
        this.init_();
    }

    init_() {
        [].forEach.call(this.targets, (target) => {
            const area   = target.querySelector(".js-csv-data");
            const count  = target.querySelector(".js-csv-count");
            const clear  = target.querySelector(".js-csv-clear");
            const csv    = target.querySelector(".js-csv-file");

            this.clean_(area, count)

            clear.addEventListener("click", (evt) => {
                this.clean_(area, count)
                this.dispalyMessage_(target, "クリアしました");
            });

            csv.addEventListener("change", (evt) => {
                evt.preventDefault();
                this.readCsv_(target, evt, area, count);
            });
        });
    }

    clean_(area, count) {
        area.innerHTML  = "";
        count.innerHTML = "0";
    }

    displayMessage(target, message) {
        const msg = target.querySelector(".js-message");
        msg.innerHTML = message
    }

    appendValue_(target, area, v) {
        const e = document.createTextNode(v + "\n");
        area.appendChild(e);
    }

    readCsv_(target, evt, area, count) {
        const file   = evt.target.files;
        const reader = new FileReader();

        this.clean_(area, count)
        this.displayMessage(target, "");

        reader.onload = (function(obj) {
            const o = obj;
            return function(evt) {
                o.processCsv(target, evt.target.result, area, count);
            };
        })(this);

        reader.onerror = (function(obj) {
            const o = obj;
            return function(evt) {
                o.displayMessage(target, "ファイルの読み込みに失敗しました");
            };
        })(this);

        reader.readAsText(file[0]);
    }

    processCsv(target, csv, area, count) {
        const lines  = csv.split(/\r\n|\n/);
        const maxLen = parseInt(area.getAttribute("maxlength"), 10);

        let c = parseInt(count.innerHTML, 10);

        try {
            lines.forEach((elm, idx) => {
                const data = elm.split(",");
                if (data.length > 0 && /^(https?)(:\/\/[-_.!~*'()a-zA-Z0-9;\/?:@&=+$,%#]+)$/.test(data[0])) {
                    if (c >= maxLen) {
                        throw new Error('上限に達しました');
                    }
                    this.appendValue_(target, area, data[0]);
                    c++;
                }
            });
        } catch (e) {
            console.log(e);
        }
        count.innerHTML = c;
    }
}

test.csv

http://hogehoge/01
ftp://hogehoge/02
http://hogehoge/03
http:/hogehoge/04
http://hogehoge/05
http://ほげほげ/06
http://hogehoge/07
http://hogehoge/08
http://hogehoge/09

UglifyJSを利用する場合

$ npm install -g uglify-js

webpack.config.js

var webpack = require('webpack');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var path = require('path');

module.exports = {
  entry: {
    'app1': './app.js',
  },
  output: {
    path: __dirname,
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query:{
          presets: ['es2015']
        }
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false }
    }),
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      server: { baseDir: [path.resolve(__dirname)] } })
  ],
  devServer: {
    contentBase: path.resolve(__dirname),
    compress: true,
    port: 9000
  }
};

ビルド

$ browserify app.js -o bundle.js -t [ babelify --presets es2015 ]

モジュールのインストール

$ npm init
$ npm install -g browserify 
$ npm install --save-dev babelify babel-preset-es2015

出力結果

Hash: 2bae931e656c8d42ecde
Version: webpack 2.5.1
Time: 72ms
            Asset     Size  Chunks             Chunk Names
bundle.webpack.js  6.05 kB       0  [emitted]  main
   [0] ./read-csv.js 2.69 kB {0} [built]
   [1] ./app.js 364 bytes {0} [built]

圧縮する場合

$ uglifyjs bundle.js -c -o bundle.min.js

実行したコマンド

webpack app.js bundle.js

実行コマンド

$ webpack -p

実行結果

Hash: 4417e05b925329407a30
Version: webpack 2.5.1
Time: 1813ms
         Asset     Size  Chunks             Chunk Names
app1.bundle.js  8.37 kB       0  [emitted]  app1
   [0] ./read-csv.js 4.15 kB {0} [built]
   [1] ./app.js 1.49 kB {0} [built]