Zenn
🅰️

どうしても今Angular 2 with Babelを触ってみたい人のためのビルドスクリプト

2021/07/04に公開
Angular
Babel
tech

追記150528: alpha.25よりTypeScript化が済み、ビルド方法が変わったので下記の手順は不要になりました。この記事は記録のために残します。

追記150509: alpha.22でこの方法が封じられたので現在は使えません。今後のバージョンでまた使えるようになる or 使わなくても済むようになるかも。

#!/bin/sh
NPM_BIN=node_modules/.bin
BABEL=${NPM_BIN}/babel
BROWSERIFY=${NPM_BIN}/browserify

npm i angular2 babel babel-core
#npm i browserify
#mkdir public
#${BABEL} --optional es7.decorators src --out-dir public
${BABEL} node_modules/angular2/es6/dev --out-dir .tmp-angular2-to-es5
${BABEL} node_modules/angular2/node_modules/rtts_assert/es6 --out-dir .tmp-rtts_assert-to-es5
rm -f .tmp-rtts_assert-to-es5/es5build.js
#cp src/index.html public
#cp node_modules/angular2/node_modules/zone.js/zone.js public
mv node_modules/angular2 node_modules/angular2-original
mv .tmp-angular2-to-es5 node_modules/angular2
mv node_modules/angular2-original/node_modules/rtts_assert node_modules/angular2-original/node_modules/rtts_assert-original
mv .tmp-rtts_assert-to-es5 node_modules/rtts_assert
ln -s ../../node_modules/angular2-original/node_modules node_modules/angular2/node_modules
#${BROWSERIFY} public/app.js -o public/bundle.js

MIT、無保証

./srcに自分のアプリケーションソースを置いた場合#を外す。Angular 2ビルドのみならこのまま。インストールされるes6/dev/内のソースをビルドしているため、traceur-runtime不要でBrowserifyで結合可。たぶんwebpackでも出来るけど試してない。

20150425追記: angular 2.0.0-alpha.20でもこの手順が使えました。
20150429追記: angular 2.0.0-alpha.21でもこの手順が使えますし、Quickstartが整備されたのでちょっと触る分にはそこがおすすめ。

Discussion