// app/assets/angular2/components/hello_world.js import {Component} from 'angular2/core'; @Component({ selector: 'helloWorld', template: ' Hello World ! ' }) export class HelloWorldComponent { constructor() { } }

// app/assets/angular2/bootstrap.js import 'zone.js/lib/browser/zone-microtask'; import 'reflect-metadata'; import 'babel-polyfill'; import {bootstrap} from 'angular2/platform/browser' import {HelloWorldComponent} from './components/hello_world' // bootstrap from AppComponent document.addEventListener("DOMContentLoaded", () => { bootstrap(HelloWorldComponent); }) // app/assets/angular2/angular2.js require('./bootstrap.js')

　　NPM Scripts

　　将 package.json 中 scripts 部分改成下面的代码：

"scripts": { "bundle": "browserify -t babelify app/assets/angular2/angular2.js -o app/assets/javascripts/bundle.js", "watch-js": "watchify -t babelify app/assets/angular2/angular2.js -o app/assets/javascripts/bundle.js --ignore-watch='**/node_modules/**' --detect-globals=false --delay=0 -v", "start": "npm run bundle & npm run watch-js & rails s", "test": "echo \"Error: no test specified\" && exit 1" },

　　关于 npm scripts 的资料可以参考：https://docs.npmjs.com/misc/scripts

　　上面的配置新增了三个npm script， 分别是：

　　# 用 Browserify 和 Babelify 将 ES6 转换成 ES5

　　# app/assets/angular2/angular2.js -> app/assets/javascripts/bundle.js

　　# 用 Watchify 监控 app/assets/angular2 下面的文件变化，并转换成ES5

　　# 执行 npm run bundle, npm run watch-js 并启动 rails-server

　　加载 bundle.js 到 application.js 中

　　在 app/assets/javascripts/application.js 末尾添加下面的代码

//= require bundle

　　然后在项目根目录下执行 npm start

dev-ops git:(master) npm start > dev-ops@0.0.1 start /Users/zuozuo/edaixi/dev/dev-ops > npm run bundle & npm run watch-js & rails s > dev-ops@0.0.1 watch-js /Users/zuozuo/edaixi/dev/dev-ops > watchify -t babelify app/assets/angular2/angular2.js -o app/assets/javascripts/bundle.js --ignore-watch='**/node_modules/**' --detect-globals=false --delay=0 -v > dev-ops@0.0.1 bundle /Users/zuozuo/edaixi/dev/dev-ops > browserify -t babelify app/assets/angular2/angular2.js -o app/assets/javascripts/bundle.js => Booting Puma => Rails 5.0.0.beta3 application starting in development on :3000 => Run `rails server -h` for more startup options => Ctrl-C to shutdown server Puma starting in single mode... * Version 3.0.2 (ruby 2.3.0-p0), codename: Plethora of Penguin Pinatas * Min threads: 5, max threads: 5 * Environment: development * Listening on tcp://localhost:3000 Use Ctrl-C to stop

　　注：如果你之前启动的rails server还在运行的话，你需要先用CTRL-C 将它关掉，然后再执行npm start，从上面终端中显示的信息可以看到 npm start 确实如上文所说的那样执行了三个命令

　　好了，现在在浏览器中访问页面： :3000/

　　页面显示出了 Hello World。

　　到这里我们的 Hello World 程序就大功告成了。

　　使用 livereload 实现页面自动刷新

　　上面我们实现了用 watchify 监控js文件的变化，编辑完 JS 代码保存之后 watchify 会自动将我们写的 es6 代码转换成 es5，这样当我们刷新页面的时候加载的就是最新的 JS。

　　下面是在我的电脑上执行 npm run watch-js 之后，我多次保存 hello_world.js，watchify 自动编译的输出结果。