JS以外のプログラミング言語で一般的に使われている規格・仕組みがJSにはないので、それを実装するために生まれたのがCommonJS(前身はServerJSという名前でサーバーサイドで動くJSのAPIを標準化するのが目的だった。Node.jsなどにもつながっていく) そのなかでモジュールを扱う方法が今回のテーマ。
元々 | CommonJS | AMD = Asynchronous Module Definition | Webpack |
ブラウザでの実装のため | Browserify | RequireJS | |
方式 | そのまま実行するのではなく、ビルドしておく | 実行時に非同期でロードして、依存関係を解消する | モジュールをサポートする点は他の2つと同じ。加えてCSSや読み込む画像ファイルなども含めて、単一のファイルに書き出してくれる。ばべr |
選択肢は 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-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",