react開發環境搭建

標籤：

最近接觸react架構，小記一下~~~

開發環境配置

要搭建一個現代的前端開發環境配套的工具有很多，比如 Grunt / Gulp / Webpack / Broccoli，都是要解決前端工程化問題，這個主題很大，這裡為了使用 React 我們只關注其中的兩個點： 

• JSX 支援
• ES6 支援

配合 webpack 非常方便。

Webpack 配置 React 開發環境

Webpack 是一個前端資源載入/打包工具，只需要相對簡單的配置就可以提供前端工程化需要的各種功能，並且如果有需要它還可以被整合到其他比如 Grunt / Gulp 的工作流程。

 

npm（Node Package Manager）是nodejs時代不可或缺的最好的包管理器，現在已經隨nodejs官方包同時會安裝到你的裝置上去。只要給項目書寫好package.json放於項目根目錄，在重新部署之時只需要執行 npm install 一行簡單的命令，所有相關的依賴就能夠自動安裝到項目目錄下面，並且還能很方便的對不同項目的不同依賴包版本進行良好、統一的管理。

NPM主要運用於Node.js項目的內部依賴包管理，安裝的模組位於項目根目錄下的node_modules檔案夾內。而Bower大部分情況下用於前端開發，對於CSS/JS/模板等內容進行依賴管理，依賴的下載目錄結構可以自訂。

關於NPM的具體使用已經不需更多贅述，可以自行參考http://www.cnblogs.com/reese-blogs/p/5336460.html

 

安裝Bower
npm install -g bower 之後你就可以使用 bower install 類似於NPM的方式，對於當前項目進行前端依賴的相關管理。使用起來和NPM一樣方便快捷。

例如：bower install chartjs  安裝chart.js

 

安裝 Webpack：npm install -g webpack

Webpack 使用一個名為 webpack.config.js 的設定檔，要編譯 JSX，先安裝對應的 loader: npm install babel-loader --save-dev

 

使用npm start啟動項目，使用npm run build 打包

 

假設我們在當前工程目錄有一個入口檔案 entry.js，React 組件放置在一個 components/ 目錄下，組件被 entry.js 引用，要使用 entry.js，我們把這個檔案指定輸出到 dist/bundle.js，Webpack 配置如下：

var path = require(‘path‘);module.exports = {    entry: ‘./entry.js‘,    output: {        path: path.join(__dirname, ‘/dist‘),        filename: ‘bundle.js‘    },    resolve: {        extensions: [‘‘, ‘.js‘, ‘.jsx‘]    },    module: {        loaders: [            { test: /\.js|jsx$/, loaders: [‘babel‘] }        ]    }}

resolve 指定可以被 import 的檔案尾碼。比如 Hello.jsx 這樣的檔案就可以直接用 import Hello from ‘Hello‘ 引用。

loaders 指定 babel-loader 編譯尾碼名為 .js 或者 .jsx 的檔案，這樣你就可以在這兩種類型的檔案中自由使用 JSX 和 ES6 了。

監聽編譯: webpack -d --watch

更多關於 Webpack 的介紹

• webpack-howto

react開發環境搭建