search

hysryt / wiki

https://hysryt.github.io/wiki/
0 stars 0 forks source link

Browserify #13

Open hysryt opened 6 years ago

hysryt commented 6 years ago

Browserify

http://browserify.org/

Node.js用に作られたモジュールをブラウザでも利用できるようにするパッケージ ソースコード中のrequire()を再帰的に展開し、一つのスクリプトファイルを生成する

hysryt commented 6 years ago

Browserifyのインストール

$ npm install -g browserify

browserifyをグローバルでインストール npmがインストールされていない場合はまず #6 を行う

インストールできたことの確認

$ browserify --version
14.5.0
hysryt commented 6 years ago

jQueryモジュールをブラウザで使用

npm経由でインストールしたjQueryを、browserifyを使ってブラウザで使えるようにする

パッケージの作成

$ mkdir mypkg
$ cd mypkg
$ npm init -y

jQueryのインストール

$ npm install jquery

node_modulesディレクトリが追加され、その中にjqueryパッケージがインストールされる

スクリプトファイルを用意

$ vi script.js
/* script.js */
var $ = require('jquery');

Browserifyを実行

$ browserify script.js > bundle.js

生成されたbundle.jsをHTMLファイルから<script>タグで読み込めば、jQueryを使用できる jQueryだけでなく複数のモジュールを使いたい場合も同じように、script.jsにrequire()を追加してbrowserifyで連結させてやればいい browserifyを使えば全てのモジュールを一つのスクリプトファイルをまとめられるため、<script>タグも一つで済む

hysryt commented 6 years ago

Browserify + Babelify

ES6で書いたスクリプトをブラウザで実行する ES6からES5への変換はBabelify（importはrequireに変換）、 モジュールの結合はBrowserifyが行う

インストール

$ npm init -y
$ npm install -D browserify babelify babel-core babel-preset-env

Test.js

export default class Test {
  constructor() {
    console.log('Hello, world!');
  }
}

script.js

import Test from './Test';
new Test();

変換

$ $(npn bin)/browserify script.js -o output.js -t [ babelify --presets [ env ] ]

index.html

<html>
  <head>
  </head>
  <body>
    <script src="./output.js"></script>
  </body>
</html>

開発者ツールのコンソールにHello, world!が表示されれば成功