Webpack – １日ひとつ、強くなる。

JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack)

JS以外のプログラミング言語で一般的に使われている規格・仕組みがJSにはないので、それを実装するために生まれたのがCommonJS(前身はServerJSという名前でサーバーサイドで動くJSのAPIを標準化するのが目的だった。Node.jsなどにもつながっていく) そのなかでモジュールを扱う方法が今回のテーマ。

元々	CommonJS	AMD = Asynchronous Module Definition	Webpack
ブラウザでの実装のため	Browserify	RequireJS
方式	そのまま実行するのではなく、ビルドしておく	実行時に非同期でロードして、依存関係を解消する	モジュールをサポートする点は他の２つと同じ。加えてCSSや読み込む画像ファイルなども含めて、単一のファイルに書き出してくれる。ばべｒ

選択肢は Browserify を gulp に仕込んで使うか、Webpack を使うか。まずは歴史の古い Browserify から学習する。

Browserify

Node モジュール。そのため npm で管理する。まずは npm でインストール。

npm install -g browserify

以下のコマンドでビルド

browserify 元のファイル > 出力先のファイル

Transform

例えば ES6 をbabelを使って変換した後に、Browserify でビルドしてくれる機能。

リスト

https://github.com/substack/node-browserify/wiki/list-of-transforms

Babelify

Browserify で Babel を使って transform するための npm ライブラリ。

https://github.com/babel/babelify

インストール

これをするまえに npm init しておく

$ npm install --save-dev babelify

コマンドラインで実行

-o output 先
-t transform の設定
babelify を使って、babelify の preset の es2015 と react でtransform する

  $ browserify script.js -o bundle.js -t [ babelify --presets [ es2015 react ] ] --debug

 $ browserify main.js -o app.js -t babelify

これだけだとimport exportができない。babelify のプリセットを入れる。

npm install –save-dev babel-preset-es2015

でオプションを入れて実行

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

次のようなファイルをエクスポート・インポートしている

//module1.js
export class Module1{
    constructor() {
        //自身のメソッドを実行
        this.callStart();
    }

    //メソッド
    callStart() {
        alert("heaeaaaaa");
    }
}



//main.js
"use strict";
import { Module1 } from './module1.js';
new Module1();

ここまではできた

npm にあるライブラリをブラウザで使う

npm install jquery --save

使うところで次のコードを書く

import $ from 'jquery';

もしくは以下のコード

import jquery from 'jquery';
window.jQuery = jquery;
window.$ = jquery;

import できていないと思っていたが…

普通にできており、問題は単純にready前に実行していたから。以下のように書いて準備ができてから実行すること。

$(function(){
    // 実行する処理
    new Module1();
    $(".target").html("ffsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs");
    let jQueryValue = $(".target").html();
    console.log(jQueryValue);
});

Gulpで実行する

まずはインストール

$ npm install -g gulp //全く使ったこと無いときだけこれを

$ npm install --save-dev gulp

タスクを書くための gulpfile.js を作成、これはルートに置けばいいのだろうか…→さしあたってOK

//まずはnpmをインポートする
const gulp = require('gulp');

//タスクを登録'hello'という名前
gulp.task('hello', function() {
    console.log('Hello gulp!');
});

//デフォルトで実行されるタスクに'hello'タスクを登録
//gulp で実行すると使える
gulp.task('default', ['hello']);

色々入れる

Browserifyが出力する形式をgulpで扱うためのvinyl（ビニール）という形式に変換するために以下のモジュールを入れる。

$ npm install vinyl-source-stream –save-dev

//まずはnpmをインポートする
const gulp = require('gulp');
const browserify = require("browserify");
const babelify = require("babelify");
const source = require("vinyl-source-stream"); //gulpで使うストリーム形式に変換


//Browserify + babelify
gulp.task('build:scripts', function() {
    return browserify('./main.js') //対象のファイル
        .transform("babelify", {presets: ["es2015"]}) オプション
        .bundle()
        .pipe(source('app.js')) 変換かつ出力するファイル名も指定
        .pipe(gulp.dest('./')); 出力先。これは同じところに。
});

watchify で browserify を差分だけ実行してくれる

Watchify は Browserify の開発者が作っているもので、差分だけをコンパイルすることでかなり早い。これも本当は Gulp から実行できるのだが、ちょっと難しかった。

色々検索した所、package.json の script に書いてしまえば、普通に CLI で実行するのと同じように実行できるとのこと。npm script という名前。

//package.json
{
  "name": "browserify-test",
  "version": "1.0.0",
  "main": "main.js",
  "dependencies": {
    "jquery": "^3.1.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.22.0",
    "browserify": "^14.1.0",
    "gulp": "^3.9.1",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.9.0"
  },
  "scripts": {
    "watch": "watchify main.js -v -t babelify -d -o app.js",
  },
  "browserify": {//いまいち謎だが、内容的には当然browserifyのoptiion
    "transform": [["babelify", {"presets": ["es2015"]}]]
  }
}

npm run スクリプト名で実行できるので、npm run watch で実行できる。できた早い！！

さらにブラウザシンクもする

http://ceblog.mediba.jp/post/154522336717/npm-scripts

こちらのほうがわかりやすいかsass

Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ

node-sass が良さそうなので入れる

npm install node-sass –save-dev

"sass": "node-sass --include-path src/sass --watch src/sass/screen.sass src/css/screen.css"

include pass は @import するファイルのある位置のはず。 –watch オプションを与えることで監視。どうやらこれだけで、import しているファイルが変化しただけでも更新してくれる模様。

次のようにすれば、同時に実行してくれる。

"start": "npm run watch:script & npm run watch:sass",

カテゴリー: Webpack

Browserify, WebPack あたりの学習