在書寫文章以前,我假設你們已經有了 JavaScript
,Node 包管理工具
,Linux 終端操做
這些基本技能,接下來,我將一步一步指引你們從頭搭建一個 React
項目css
咱們將使用 Webpack
和 Babel
搭建一個 React
應用,咱們的目的很清晰,就是 更好的理解和掌握這些工具的使用
html
咱們建立的應用程序既要作到 最小
,也要遵循 最佳實踐
,爲不是特別熟練的同窗鞏固一下基礎java
建立你的項目,並添加的你的配置文件 package.json
node
mkdir webpack-babel-react-revisited cd webpack-babel-react-revisited yarn init
咱們首先安裝 Webpack
,它是目前很是流行的 模塊打包器
,它將應用程序包含的每一個模塊打包成少許的 塊
,以便這些代碼從服務器加載到瀏覽器中react
yarn add webpack --dev
接下來,咱們開始書寫一些模塊。咱們將源文件 app.js
保存到 src
目錄中webpack
/** app.js */ console.log('Hello from 楓上霧棋!');
而後,咱們跑一下 Webpack
git
./node_modules/webpack/bin/webpack.js ./src/app.js --output-filename ./dist/app.bundle.js
若是你打開生成的 app.bundle.js
,你會發現上面是 webpack
的模塊處理代碼,下面是咱們書寫的 console.log
github
這條指令是將咱們的 app.js
做爲 Webpack
的 入口文件
,將結果輸出到 dist
文件夾中,指令有些冗長,在實際開發中,咱們使用 webpack
配置文件來代替,爲了文檔結構看起來更加清晰,參考 目錄
以下web
├── config │ ├── paths.js │ ├── webpack.config.prod.js ├── src │ ├── app.js ├── package.json
下面是參考 配置
json
paths.js
const path = require('path'); const fs = require('fs'); const appDirectory = fs.realpathSync(process.cwd()); const resolveApp = relativePath => path.resolve(appDirectory, relativePath); module.exports = { appDist: resolveApp('dist'), appSrc: resolveApp('src'), };
這個文件不是必須的,但在項目增大後,它的意義就瞬間出來了
webpack.config.prod.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const paths = require('./paths'); const plugins = [ new HtmlWebpackPlugin({ title: 'webpack babel react revisited', filename: path.join(paths.appDist, 'index.html'), }), ]; const config = { entry: { app: path.join(paths.appSrc, 'app'), }, output: { path: paths.appDist, filename: 'assets/js/[name].js', }, resolve: { extensions: ['.js', '.jsx'], }, plugins, }; module.exports = config;
這裏咱們還添加了一個 html-webpack-plugin,它簡化了咱們 HTML
文件的建立,安裝咱們就再也不這裏贅述了,若是還不知道的同窗能夠點擊連接查看
其中,咱們還使用了一個 語法糖
,這樣在咱們導入 .js
,.jsx
時就不須要指定擴展名了
接下來,咱們指定配置文件再跑一下 Webpack
./node_modules/webpack/bin/webpack.js --config config/webpack.config.prod.js
發現除了實現上面的效果外,還自動幫咱們生成了一個 index.html
,咱們能夠點擊這個 html
,在控制檯中查看效果,相比上面,是否是方便了不少
固然,最後咱們確定也不是使用這種方式來 build
,打開 package.json
,添加以下 腳本命令
,而後執行 yarn build
,是否是瞬間感受 nice
了不少
"scripts": { "clean": "rimraf dist *.log .DS_Store", "build": "yarn run clean && webpack --config config/webpack.config.prod.js --progress" }
除此以外,Webpack
爲咱們提供了一個的 dev server
,它還支持 模塊熱替換
首先,安裝 webpack-dev-server
yarn add --dev webpack-dev-server
在 config
目錄中添加配置文件 webpack.config.dev.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const OpenBrowserPlugin = require('open-browser-webpack-plugin'); const paths = require('./paths'); const hostname = process.env.HOST || 'localhost'; const port = process.env.PORT || 3000; const plugins = [ new HtmlWebpackPlugin({ title: 'webpack babel react revisited', filename: path.join(paths.appDist, 'index.html'), }), new OpenBrowserPlugin({ url: `http://${hostname}:${port}` }), ]; const config = { entry: { app: path.join(paths.appSrc, 'app'), }, output: { path: paths.appDist, filename: 'assets/js/[name].js', }, resolve: { extensions: ['.js', '.jsx'], }, plugins, devServer: { contentBase: paths.appDist, compress: true, port, }, }; module.exports = config;
在 webpack.config.prod.js
的基礎上,咱們增長了 open-browser-webpack-plugin 插件和 devServer
配置,open-browser-webpack-plugin
插件顧名思義,會幫咱們自動打開 dev server
最後返回給咱們的地址
更新 package.json
"scripts": { "clean": "rimraf dist *.log .DS_Store", "webpack:dev": "NODE_ENV=development webpack-dev-server --config config/webpack.config.dev.js --progress", "webpack:prod": "NODE_ENV=production webpack --config config/webpack.config.prod.js --progress", "start": "yarn run clean && yarn run webpack:dev", "build": "yarn run clean && yarn run webpack:prod" }
如今,咱們就能夠經過以下方式來啓動
yarn start
啓動後,有沒有瞬間感受很棒
爲了可以使用 ES6
以及更高版本,咱們須要一個 轉換編譯器
,咱們選擇 Babel
,它能將 ES6
轉換成能夠在瀏覽器中運行的代碼,除此以外,他還內置了 React JSX
擴展,能夠說它的出現推進了 JavaScipt
的發展
全部,咱們安裝下面這些依賴包
yarn add --dev babel-loader babel-core babel-preset-env babel-preset-react
建立 Babel
默認配置文件 .babelrc
{ "presets": ["env", "react"] }
這個是告訴 Babel
用咱們剛剛安裝的兩個 presets
接下來,更新 webpack
配置文件
config.module = { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'], }, ], }
更新之後,雖然看不到什麼變化,但事實上咱們可使用 ES6
了
最後,咱們來添加 React
,這也多是你閱讀這篇文章的緣由
首先,咱們仍是先安裝它
yarn add react react-dom
用下面代碼替換 console.log
import React, { Component } from 'react'; import { render } from 'react-dom'; export default class Hello extends Component { render() { return <h1>Hello from 楓上霧棋!</h1>; } } render(<Hello />, document.getElementById('app'));
由於要添加 <div id="app"></div>
,因此咱們要修改一下 html-webpack-plugin
的配置
new HtmlWebpackPlugin({ template: path.join(paths.appSrc, 'index.html'), }),
參考 template
以下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>webpack babel react revisited</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="app"></div> </body> </html>
接下來,就是見證奇蹟的時刻
從新啓動服務,你有沒有發現搭建一個 React
應用程序就這麼簡單
接下來,你們就能夠 自行探索
,添加更多的東西來適應自身應用程序的須要
下面再補充一下如何添加 CSS
和 圖片
每一個 web 應用程序都離不開 CSS
,咱們在 src
目錄中建立 style.css
body, html, #app { margin: 0; width: 100%; height: 100%; } #app { padding: 30px; font-family: '微軟雅黑'; }
將其添加到應用程序中咱們須要使用 css-loader
若是想將 css
注入 style
標籤中,咱們還須要 style-loader,一般,是將這兩個結合使用
咱們使用 extract-text-webpack-plugin 將其解壓到外部
爲此,咱們首先安裝
yarn add --dev css-loader style-loader extract-text-webpack-plugin
而後在 app.js
中導入 style.css
import './style.css';
最後更新 webpack
配置文件
config.module = { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader', }), }, ], } config.plugins.push([ new ExtractTextPlugin("styles.css"), ])
看起來稍顯複雜,可是大功告成,爲了更好地使用它,咱們都得經歷這個過程
從新啓動服務,你會發現你的 dist
目錄中多了一個 styles.css
最後咱們增長 file-loader 來處理咱們引入的圖片等文件
首先,安裝 file-loader
yarn add --dev file-loader
咱們在 src/images
中放入一張圖片,在 app.js
中導入
import avatar from './images/avatar.jpg'; export default class Hello extends Component { render() { return ( <div> <img src={avatar} alt="avatar" style={{ width: 400, height: 250 }} /> </div> ); } }
更新 webpack
配置文件
config.module = { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'assets/images/', }, }, ], }, ], }
重啓服務,哈哈
若是有什麼問題,能夠查看 webpack-babel-react-revisited 倉庫
如今,你們對搭建 React
應用程序是否是感受輕鬆了不少,但 React
整個技術棧並不止包括這些,還有 Redux
,React Router
,單元測試
,代碼校驗
等內容,關於 React
其餘內容,歡迎查看日誌其餘文章
原文連接:Setting up Webpack, Babel and React from scratch, revisited