深度解析React以create-react-app爲基礎建立項目

時間 2019-11-09

標籤深度解析 react create app 基礎建立項目欄目 React 简体版

原文原文鏈接

這篇文章主要介紹了react以create-react-app爲基礎建立項目，寫的十分的全面細緻，具備必定的參考價值，對此有須要的朋友能夠參考學習下。若有不足之處，歡迎批評指正。css

什麼是create-react-apphtml

create-react-app是一個js庫，使用它可以很方便地創建react項目，免去了創建react項目時配置webpack、調試服務器、運行腳本等麻煩，你只須要使用這個庫，即可以一鍵完成react項目的建立初始化項目前端

注：用「[ ]」包裹的都是可自定義的內容，例如：cd [project-name]，實際上多是cd my-app，也多是cd my-project。總之「[ ]」包裹的內容，只表示上下文裏相互對應的變量。vue

npm install -g create-react-app 
  
create-react-app [project-name] 
cd [project-name]
複製代碼

運行完以上命令就已經處在新建的項目中了，此時運行npm run start和npm run build了。可是，默認全部配置是隱藏起來的，要想自定義配置，須要運行一個命令：node

npm run eject
複製代碼

此時會提示，該命令不可逆，是否繼續，輸入y，這樣全部配置項就都出來了。這時候也能夠作一些定製化的配置了，好比：react

修改build後的output位置webpack

js / css / img等靜態資源會默認輸出到 build -> static 下面，其配置項在config -> webpack.config.prod.js 裏。git

js在output屬性裏，大約第60行；
css在開頭的cssFilename變量聲明，大約第38行；
圖片等在module -> rules的loader配置裏，大約第143行；

map文件由devtool屬性控制，若是不想要map，註釋掉就能夠，大約第57行；github

manifest.json在ManifestPlugin的配置裏，大約294行；web

基礎模板在HtmlWebpackPlugin的配置裏，不過能夠看到，是引的 ‘./paths.js' 文件，因此要修改 config -> paths.js 裏面的 appHtml 屬性；

默認在build時會清空build目錄，配置項是scripts -> build.js 裏的 fs.emptyDirSync(paths.appBuild); 這一句，註釋掉就不會把老文件刪掉了（灰度發佈的時候可能會用到）；

不eject其餘修改配置的方法

除了 npm run eject 暴露出全部配置文件外，還有其餘辦法修改配置，因爲本文主題緣由不作展開，僅給出相關鏈。

一個（部分人認爲）比較優雅的方法，即引入 react-app-rewired 插件來實現配置覆蓋。須要在根目錄新建一個 config-overrides.js 文件，想配置啥就寫啥（怎麼又多出來一種配置。。。），還須要重寫下npm start等相關命令，詳情點擊連接查看。

另外一個可參考create-react-app的git主頁上推薦的Adding a CSS Preprocessor (Sass, Less etc.) 例子。大概思路就是先安裝一個node環境可編譯sass的插件node-sass-chokidar，而後利用npm-run-all同時運行npm start 和 watch-css（監聽sass文件的命令）。我的感受繞了個大圈，仍是再議吧。。。

react等做爲全局變量不打包

爲了利用cdn，咱們常會在頁面裏引用react或其餘相似庫的script標籤，這樣在瀏覽器環境裏就有了相應的全局變量，同時減小了js的體積。下面以react爲例。

首先在config -> webpack.config.prod.js 的配置里加入以下代碼：

module.exports = { 
 ... 
 externals: { 
 'react': 'React', 
 'react-dom': 'ReactDOM'
 }, //歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：864305860
 ... 
} 
複製代碼

ey對應的是庫的名字，value對應的是全局變量的名字。這裏要注意，全局變量的名字要與代碼中import的名字一致，要保證規範。另外，此處要修改下 html-webpack-plugin 插件配置的模板文件，由於須要加入全局變量，因此加入相應的script便可。以 public -> index.html 爲例：

<!DOCTYPE html> 
<html lang="en"> 
 <head> //歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：864305860
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 <meta name="theme-color" content="#000000"> 
 <!-- 
  code here 
 -->
 </head> 
 <body> 
 <noscript> 
  You need to enable JavaScript to run this app. 
 </noscript> 
 <div id="root"></div> 
 <!-- 
  code here 
 -->
<!-- 新插入的兩個js -->
 <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react.min.js"></script> 
 <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react-dom.min.js"></script> 
 </body> //歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：864305860
</html> 
複製代碼

問：既然瀏覽器裏面都有了全局變量，如window.React，那麼代碼裏面其實就不用 import React from 'react' 了，更進一步，若是連react都不用引了，那麼設置externals又有什麼用呢（這個地方好好縷縷，是否是這個理）？答：若是按照上面所說，去掉import和external，build出來的文件是能夠順利的在瀏覽器端運行的。可是若是開發的時候是起的server，那麼server端就無法分析引用了，也就無法作到熱更新了，另外，對於先後端同構來講，服務端也是找不到依賴的。因此，若是你是開着靜態文件的監聽，而且手動刷新瀏覽器的話，不import和external理論上是沒問題的。

安裝sass或less（以sass爲例）

npm install sass-loader node-sass --save-dev
複製代碼

或者

npm install less-loader less --save-dev
複製代碼

安裝後修改config -> webpack.config.dev.js 和 webpack.config.prod.js，分別在css的loader配置裏面修改兩處：一是 test: /.css$/ 增長scss和sass；二是use裏面最後再加個loader，直接加 "sass-loader" 就能夠了，也不用配置別的了（less同）。

//test: /\.css$/ 
test: /\.(css|scss|sass)$/ 
... //歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：864305860
use:[ 
 { 
 ... 
 }, 
 "sass-loader"
]
複製代碼

添加ant-design

npm install antd babel-plugin-import --save-dev 
複製代碼

在config -> webpack.config.dev.js 和 webpack.config.prod.js 裏（或者 .babelrc 文件）的babel-loader的options配置裏，加入以下代碼：

plugins: [ 
 ['import', { libraryName: 'antd', style: 'css' }] // `style: true` 會加載 less 文件 
]//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：864305860
複製代碼

若是啓用了 style:true 那就必須是裝less了

結語

感謝您的觀看，若有不足之處，歡迎批評指正。

本次給你們推薦一個免費的學習羣，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。對web開發技術感興趣的同窗，歡迎加入Q羣：864305860，無論你是小白仍是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。最後，祝你們早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。