## ビルド環境
## ビルド環境
### Vue
## bundleツールサポートの充実
全てのbundle系ツールに対応
- [rollup-plugin-vue (rollup)](https://github.com/vuejs/rollup-plugin-vue#options)
- [vueify (browserify)](https://github.com/vuejs/vueify#css-extraction)
- [vue-loader (webpack)](http://vue-loader.vuejs.org/en/configurations/extract-css.html)
Vueは公式でvue-cliというものを提供している
```sh
# vue-cli をインストール
$ npm install --global vue-cli
# "webpack" ボイラープレートを使用した新しいプロジェクトを作成する
$ vue init webpack my-project
# 依存関係をインストールしてgo!
$ cd my-project
$ npm install
$ npm run dev
```
## ビルド環境
### React
## React
package.json
```js
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.3.13",
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
}
```
## React
.babelrc
```js
{
"presets": [
"es2015",
"react"
]
}
```
## React
browserify
```js
"scripts": {
"browserify": "browserify ./test/src/index.jsx -t babelify -o ./test/dist/index.js",
}
```
## React
webpack.config.js
```js
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: ['babel-loader'],
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
}
```
```
## create react app
フロントエンドの環境づくりの複雑化へのアプローチとしてFacebook社が公式で準備
中ではWebpackなどが動いている
[https://github.com/facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)
## テンプレート周り
### Vue
HTMLそのまま。ただし、データのbindingにはVue独自の記述が必要
```message-list.vue
```
### React
```js
import React from 'react';
export default class EntryList extends React.Component {
const message = this.props.message;
render () {
return (
[https://nagoya-js.github.io/](https://nagoya-js.github.io/)
# Thank You!
Twitter: @steelydylan