8. 用 webpack 和 babel 配置 react 開發環境 · webpack 3 零基礎入門教程

# 8. 用 webpack 和 babel 配置 react 開發環境相信這個話題很多人都感興趣，這里就用幾個簡單的命令就可以搭建出 react 的開發環境。 ## 1. 安裝 react 要使用 react，就必須裝下面兩個包的。 ``` bash $ npm install --save react react-dom ``` ## 2. 建立 babel 可能你不懂 `babel` 是什么，你可以把它理解為編譯器，它能把 `react` 代碼轉成一般瀏覽器可讀可執行的代碼，通常可以用它來轉化 `react` 或 `vue` 這樣的前端代碼，或者把 `es6` 代碼轉成普通的 javascript 代碼等等。如果還不理解的話，可以看我這篇文章 [babel 入門指南](https://www.rails365.net/articles/babel-ru-men-zhi-nan)。要讓 `babel` 很好的轉化 `react` 代碼，首先要安裝好 `babel`，再裝 `babel` 轉化 `react` 的包。運行下面的命令。 ``` bash $ npm install --save-dev babel-core babel-preset-react babel-preset-env ``` 創建 `.babelrc` 文件。 ``` { "presets": ["env", "react"] } ``` 為什么我知道要這么做呢？因為我是分別結合 `babel` 和 `react` 的官網給的最新官方指南。可以參考下面兩個鏈接： - [React preset](https://babeljs.io/docs/plugins/preset-react/) - [React Installation](https://reactjs.org/docs/installation.html) ## 3. 在 webpack 使用 babel-loader 最后我們需要在 webpack 中使用一個 loader 來轉化 react 的代碼。首先，安裝。 ``` bash $ npm install --save-dev babel-loader ``` **webpack.config.js** ``` javascript var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: './src/app.js', ... module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', //resolve-url-loader may be chained before sass-loader if necessary use: ['css-loader', 'sass-loader'] }) }, // 這兩行是處理 react 相關的內容 { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ } ] } }; ``` ## 4. 寫 react 組件接著我們來準備一些 react 的代碼，要來測試一下。 **src/index.html** ``` html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <div id="root"></div> </body> </html> ``` **src/app.js** ``` javascript import css from './app.scss'; import React from 'react'; import ReactDOM from 'react-dom'; import Root from './Root'; ReactDOM.render( <Root></Root>, document.getElementById('root') ); ``` **src/Root.js** ``` javascript import React from 'react'; export default class Root extends React.Component { render() { return ( <div style={{textAlign: 'center'}}> <h1>Hello World</h1> </div>); } } ``` 效果如下： ![](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/photo/image/480/2017/10c0036dbb58d4e7f45fd5fae5cc09ef.png) 參考鏈接： - [Setting up Webpack, Babel and React from scratch, revisited](https://stanko.github.io/webpack-babel-react-revisited/) - [Setup a React Environment Using webpack and Babel](https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel) - [Setting up React with Webpack 3.0, Yarn and Babel](https://www.codementor.io/goodnesskay/setting-up-react-with-webpack-3-0-yarn-and-babel-9ftd5phqz) 先說這么多吧。