搜尋

首頁 >web前端 >js教程 >react以create-react-app為基礎建立項目

react以create-react-app為基礎建立項目

亚连
亚连原創
2018-05-30 14:12:101799瀏覽

這篇文章主要介紹了react以create-react-app為基礎創建項目，現在分享給大家，也給大家做個參考。

什麼是create-react-app

create-react-app是一個js庫，使用它能夠很方便地建立react項目，免去了建立react專案時配置webpack、偵錯伺服器、執行腳本等麻煩，你只需要使用這個函式庫，便可以一鍵完成react專案的建立初始化專案

首先，要先利用create-react-app建立一個react項目，可參考https://github.com/facebookincubator/create-react-app

註：用「[ ]」包裹的都是可自訂的內容，例如： cd [project-name]，其實可能是cd my-app，也可能是cd my-project。總之「[ ]」包裹的內容，只表示上下文裡相互對應的變數。 

npm install -g create-react-app 
 
create-react-app [project-name] 
cd [project-name]

執行完以上指令就已經處在新建的專案中了，此時執行npm run start和npm run build了。但是，預設所有配置是隱藏起來的，要想自訂配置，需要執行一個命令：

npm run eject

此時會提示，該命令不可逆，是否繼續，輸入y，這樣所有配置項就都出來了。這時候也可以做一些客製化的配置了，比如：

修改build後的output位置

js / css / img等靜態資源會預設輸出到build -> static 下面，其組態項目在config -> webpack.config.prod.js 裡。

  1. js在output屬性裡，大約第60行；

  2. css在開頭的cssFilename變數聲明，大約第38行;

  3. 圖片等在module -> rules的loader配置裡，大約第143行；

##map檔案由devtool屬性控制，如果不要map，註解掉就可以，大約第57行；


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


#基礎模板在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' 
 }, 
 ... 
}




#key對應的是庫的名字，value對應的是全域變數的名字。這裡要注意，全域變數的名字要與程式碼中import的名字一致，要確保規範。

另外，這裡要修改下 html-webpack-plugin 外掛程式配置的範本文件，因為需要加入全域變量，所以加入對應的script即可。以public -> index.html 為例：


<!DOCTYPE html> 
<html lang="en"> 
 <head> 
 <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> 
 <p id="root"></p> 
 <!-- 
  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> 
</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)$/ 
... 
use:[ 
 { 
 ... 
 }, 
 "sass-loader" 
]

添加ant-design

安装antd及按需加载的插件babel-plugin-import，参考https://ant.design/docs/react/introduce-cn

npm install antd babel-plugin-import --save-dev

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

plugins: [ 
 [&#39;import&#39;, { libraryName: &#39;antd&#39;, style: &#39;css&#39; }] // `style: true` 会加载 less 文件 
]

如果启用了 style:true 那就必须是装less了

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Vue实现搜索 和新闻列表功能简单范例

vue axios 表单提交上传图片的实例

vue中实现图片和文件上传的示例代码

以上是react以create-react-app為基礎建立項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：解決vue2.0動態綁定圖片src屬性值初始化時報錯的問題下一篇：解決vue2.0動態綁定圖片src屬性值初始化時報錯的問題

相關文章

看更多