React無痛開發環境建置-使用webpack
前言
react的學習曲線真的是非常之高，痛苦阿...摸了好久，使用的東西非常之多，對新手來說光環境跟工具的設定就夠頭痛了，很難專注在code上面，所以之前都是直接引入CDN...但最近剛好有React的案子，再用CDN引入大概會被宰掉吧...畢竟練習跟開發是不一樣的這邊提供我已經建置好的React 15開發環境
開始
先假設你已經有接觸過npm，並且對使用的工具有概念，如果還沒有趕快去補補~安裝環境
$ npm init --yes安裝webpack
$ npm install webpack --save -dev
安裝babel
$ npm install babel-core babel-loader --save -dev
babel對js es6及react支持
$ npm install babel-preset-es2015 babel-preset-react --save-dev
安裝react
$ npm install react react-dom --save
編寫配置文件
1. 建立 .babelrc ($touch .babelrc).babelrc
{
"presets":["es2015","react"]
}
2. 建立 webpack.config.js 在根目錄
webpack.config.js
var path = require('path'); var config = { entry: [path.resolve(__dirname, 'app/main.jsx')], output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, loaders: ['babel-loader'] }] } }; module.exports = config;
最後設定
建立兩個資料夾 app 跟 build其中 app 將會放置你的程式碼，build則會放置你編譯完後的檔案
1. 在app建立main.jsx
main.jsx
/* main.jsx */ 'use strict'; import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('container') );
2. 在build建立index.html
※ <script src="bundle.js"></script>必須放置在body底部，否則會造成過早載入找不到 <div id="container">標籤的問題
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <div id="container"></div> <script src="bundle.js"></script> </body> </html>
編譯
執行 $ webpack將程式碼編譯後打開index.html，完成!就這麼簡單
唯一要注意的是這邊設置的是最基本的環境所以每一次編寫完都需要執行一次 $ webpack 進行編譯，如有需要還可以加入其他一些工具自動編譯或是colde style~這邊就說明啦~
留言
張貼留言