從零開始學(xué)習(xí)搭建React腳手架項目
寫在前面
準(zhǔn)備學(xué)習(xí)一下react和webpack相關(guān)的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建React全家桶框架教程;步驟上都差不多
react和vue,angular一樣也有腳手架。這大大方便了我們的開發(fā)。react的腳手架是create-react-app。
腳手架下載
使用npm下載create-react-app運(yùn)行如下命令：
npm install -g create-react-app
國內(nèi)npm一般下載比較慢或者是常出現(xiàn)下載失敗的情況，我們可以指定下載的倉庫：
npm install -g create-react-app --registry https://registry.npm.taobao.org
或者直接設(shè)置npm的默認(rèn)倉庫：
npm config set registry https://registry.npm.taobao.org
第一步，依賴總覽
完成到我現(xiàn)在半成品的過程中，目前完成開發(fā)模式的相關(guān)操作，添加了babel,less,antd按需加載的地步?？傮w的package.json情況如下：
{
"name": "myreact",
"version": "1.0.0",
"description": "test react",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config config/webpack.base.config.js --hot --mode development"
},
"keywords": [
"test",
"react"
],
"author": "xxxx",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.1.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-import": "^1.8.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"postcss-import": "^12.0.0",
"postcss-loader": "^3.0.0",
"react-hot-loader": "^4.3.4",
"style-loader": "^0.22.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"antd": "^3.8.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1"
}
}
暫時做到這些依賴，需要指出的是，webpack4和以前的版本可能有差別（不一定，或許是我沒有注意到）如果需要在scrpit屬性中配置，使用cli的方式運(yùn)行，就需要安裝webpack-cli，需要行內(nèi)命令行的方式運(yùn)行，就需要安裝webpack-command,當(dāng)然，一起安裝應(yīng)該也沒有什么問題。這里是和教程里面配置的不一樣的地方。
然后，webpack4需要指明模式production|development，所以我在dev中使用了--mode development這個參數(shù)。這也是教程中沒有提到的部分。
關(guān)于babel配置
babel的相關(guān)依賴，有babel-core,babel-loader,babel-preset-es2015,babel-preset-react,babel-preset-stage-0,這個是babel的相關(guān)依賴，等等，有人可能會看到babel-plugin-import沒有提到，這個模塊的用途是為了antd的按需加載的?？梢钥纯丛敿?xì)的babelrc文件：
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"react-hot-loader/babel",
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}
以上是babel的配置，preset的值就是那三個模塊，至于作用，es2015是為了處理es6語法的，react是為了處理jsx語法的，stage-0是為了支持新特性的。
至于插件的配置，react-hot-loader/babel是為了熱更新，不丟失狀態(tài)，這點教程中已經(jīng)說到了。下邊的import這個，就是上邊提到的babel-plugin-import的配置，也是antd的按需加載，官方推薦的配置。
還需要提到一點，這里可能一些新特性還是支持不夠，比如async/await語法，可能需要再安裝babel-plugin-transform-runtime這個模塊，babelrc文件的plugins還需要配置"transform-runtime"這個插件進(jìn)去，以支持新特性。
依賴相關(guān)的就說到這里。
webpack的配置
我這邊直接在根目錄下的config目錄創(chuàng)建了webpack.dev.config.js,具體的配置如下：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
/*入口*/
entry: ['react-hot-loader/patch',path.join(__dirname, '../src/index.js')],
/*輸出到dist文件夾，輸出文件名字為bundle.js*/
output: {
path: path.join(__dirname, '../dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname, '../dist'),
historyApiFallback: true
},
module: {
rules: [{
test: /\.js[x]?$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, '../src')
},{
test: /\.css$/,
use: ['style-loader','css-loader','postcss-loader'],
},
{
test: /\.less$/,
use:[ 'style-loader',
{loader: 'css-loader',options:{importLoaders:1}},
'less-loader'],
}]
},
plugins:[new HtmlWebpackPlugin({
title:'react測試',
template:'./src/index.html',
filename:'./dist/index.html'
})],
devtool: 'inline-source-map',
resolve:{
alias: {
"@":path.join(__dirname, '../src/')
}
}
};
這邊的配置就沒啥說的，基本上loader的配置，目前完成js(x)的處理，css/less的處理，和其他的常規(guī)cli配置，少了url-loader,file-loader，代碼分割這些功能。
完結(jié)
差不多配置就是這樣，很簡陋，功能也不齊全，需要完成的工作還有很多。不過自己動手，豐衣足食……
項目的github地址 diy-react-cli歡迎各位來串門喲！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了React的生命周期函數(shù)初始掛載更新移除詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
本文主要介紹了react 路由Link配置詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家詳細(xì)介紹了如何在HTML頁面中使用 React，使用使用js模塊化的方式開發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家介紹了React?代碼拆分的幾種方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
react-router-dom?v6?使用詳細(xì)示例
這篇文章主要介紹了react-router-dom?v6使用詳細(xì)示例，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-09-09
React配置多個代理實現(xiàn)數(shù)據(jù)請求返回問題
這篇文章主要介紹了React之配置多個代理實現(xiàn)數(shù)據(jù)請求返回問題，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
React組件如何優(yōu)雅地處理異步數(shù)據(jù)詳解
這篇文章主要為大家介紹了React組件如何優(yōu)雅地處理異步數(shù)據(jù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
本篇文章主要介紹了在React 組件中使用Echarts的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
React通過redux-persist持久化數(shù)據(jù)存儲的方法示例
這篇文章主要介紹了React通過redux-persist持久化數(shù)據(jù)存儲的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了在?React?中使用?i18next,本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01