導航:首頁 > 源碼編譯 > umijs本地編譯非常慢

umijs本地編譯非常慢

發布時間:2022-05-02 10:00:59

『壹』 webpack怎麼自動編譯reactjs

使用webpack編譯打包react是非常便捷的。這也是人們常用的一種方式。但是在使用過程中,一定要注意一個細節,那就是webpack和babel-loader的安裝位置。

react安裝

當然,使用react必須先安裝react和react-dom,其安裝方式很簡單(前提是我們必須安裝有npm)。

# npm install react react-dom –save

react安裝就這樣簡單,其實react和react-dom就是相當於js類庫。但是我們需要解析器來解析react的語法。

react解析器babel安裝

babel安裝的位置是我們這篇文章的目的。babel有兩種安裝的位置:一種是全局安裝,一種是本地安裝——也就是安裝在項目目錄下的node_moles下。

# npm install babel-core babel-loader babel-preset-react –save-dev

//本地安裝

#npm install babel-core babel-loader babel-preset-react –g

//全局安裝

一般情況下我們選擇本地安裝,這樣便於管理。

打包工具webpack的安裝

同樣,webpack的安裝位置也是這篇文章描述的所要注意的點。當然,它也有兩種安裝的位置:全局安裝和本地安裝。

# npm install webpack –save-dev

//本地安裝

# npm install webpack –g

//全局安裝

如果選擇本地安裝,那麼在使用的時候較麻煩一些,我們需要在命令前加上路徑。所以一般情況下都是全局安裝,這樣就可以在任意位置直接使用。

這里我們選擇全局安裝。這樣才能出現我們將要說的問題。

webpack配置文件編寫

安裝完webpack以後,下面來編寫webpack配置文件webpack.config.js。這里我不寫全部,只寫載入loader部分。

代碼一

mole:{

loaders: [

{

test: /\.js$/,

loader: 'babel',

query:{

presets:['react']

}

}

]

}

編譯過程中出現的錯誤

好了,到了關鍵的地方了。現在我們整個系統的配置是這樣的:babel安裝到本地,webpack安裝到全局位置,webpack配置文件如代碼一所示。

接下來我們就要編譯打包我們的項目。

# webpack

執行該命令以後,你會發現出現如下的錯誤:

ERROR in (webpack)/~/node-libs-browser/~/process/browser.js

Mole build failed: Error: Couldn't find preset "react" relative to
directory
"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"

……

這也就是說找不到babel-preset-react。

好了,說了這么多終於在這里引出了我們將要討論的問題(這里大家不要嫌我啰嗦,為什麼出現這種問題,其原因總要弄清楚。什麼樣的配置會出現這種問題,了解以後才容易上手解決)。

解決問題的方式

出現上述問題以後,我們有這樣三種方式可以解決。

方式一

要解決這個問題很簡單。我們知道,出現這個問題是因為bable和webpack安裝的位置不同,所以找不到babel-preset-react。因為在配置文件中有這樣一段代碼。

query:{

presets:['react']

}

好了,既然知道是安裝位置不同,那我們可以將babel安裝在全局位置,這樣這個問題不就解決了嗎。

#npm remove babel-core babel-loader babel-preset-react –save-dev

//首先移除原先安裝的babel

#npm install babel-core babel-loader babel-preset-react –g

//全局安裝

沒錯,問題解決了。但是我們不推薦使用這種方式。因為這樣不便於管理,所以還是使用其他的方式。

方式二

此種方式和方式一大同小異。方式一是改變babel的安裝位置,而這里是改變webpack的安裝位置。原先webpack是安裝到全局位置的,所以找不到安裝到本地項目目錄下的babel-preset-react。因此我們可以改變webpack的位置。

# npm remove webpack –g

//移除原先的webpack

# npm install webpack –save-dev

//將webpack安裝到本地位置——也就是項目目錄下的node_moles中

# ln –s /項目根目錄/node_moles/webpack/bin/webpack.js /usr/bin/webpack

//為了使用webpack方便,在這里我們在/usr/bin目錄下建立軟連接(也就是快捷方式)

//這樣我們就可以在任意位置直接使用webpack命令了。

此時我們已經改變了webpack的安裝位置。現在二者同在項目目錄下安裝。所以可以正確編譯了。

此種方式較方式一,我個人比較推薦這種方式,這樣比較方便管理。但是,這種方式也不是沒有弊端。如果我們有多個項目,那我們就需要在每個項目下都安裝webpack,那豈不是很麻煩。所以這種方式也不是很好。

方式三

該方式應該說是最值得推薦的,因為不需要改變webpack和babel的安裝位置。webpack還是在全局位置,babel還是在本地項目位置下。我們需要做的就是修改webpack的配置文件,在代碼一的基礎上添加一句代碼。

代碼二

mole:{

loaders: [

{

test: /\.js$/,

loader: 'babel',

exclude:/node_moles/,

query:{

presets:['react']

}

}

]

}

『貳』 umijs已經實現了首頁載入優化了嗎


幾千條數據... 渲染上沒啥優化的

  1. 首先用戶不可能一次把所有的都看到,所以看到哪裡就載入哪裡的數據就行,相當於分頁;

  2. JS載入肯定是動態插入DOM,盡量的少操作DOM,直接拼接為字元串一次性插入就行;

  3. 剩下的優化就是JS語法上的,比如減少內存開銷,語法規范等。




『叄』 一個前端vue學的還不熟練,拿到offer的公司用的react框架。說是給我培訓一個星期左右

你有vue的基礎,有心的話我估計1-2天就能理解react了。公司有人會的話,多提提問題一周應該不是什麼問題,例如你在vue里怎麼做一些事情,你可以問問在react這么實現。

理念上這兩個東西都非常相似。react不太友好的是東西非常多,vue在這方面比較好,什麼router,vuex等等官方都有。react這邊雜七雜八的(熟悉以後都不是問題,前期吃力點),router還好,但是狀態管理有rex、mobx、soga等等。

另外還有umijs這種規范和組織類的。

都是需要花時間去理解。

『肆』 http://www.aipai.com/c32/PTomJSUmISNqJWQqLw.html 這個視頻里的第一首歌曲叫什麼

超舒服英文女聲酒吧慢搖歌曲 - 2015年5月收錄

『伍』 http://www.aipai.com/c7/Pj05JSUmImgnaiAg.html 求歌名

schnuffel - chenparty
下載
http://mp3..com/m?tn=mp3&ct=134217728&lm=-1&word=schnuffel%20-%20chenparty
試聽
http://www.tudou.com/programs/view/c5FV1q5GUSY

閱讀全文

與umijs本地編譯非常慢相關的資料

熱點內容
噴油螺桿製冷壓縮機 瀏覽:570
python員工信息登記表 瀏覽:371
高中美術pdf 瀏覽:153
java實現排列 瀏覽:508
javavector的用法 瀏覽:976
osi實現加密的三層 瀏覽:226
大眾寶來原廠中控如何安裝app 瀏覽:906
linux內核根文件系統 瀏覽:235
3d的命令面板不見了 瀏覽:520
武漢理工大學伺服器ip地址 瀏覽:141
亞馬遜雲伺服器登錄 瀏覽:517
安卓手機如何進行文件處理 瀏覽:65
mysql執行系統命令 瀏覽:923
php支持curlhttps 瀏覽:139
新預演算法責任 瀏覽:439
伺服器如何處理5萬人同時在線 瀏覽:244
哈夫曼編碼數據壓縮 瀏覽:419
鎖定伺服器是什麼意思 瀏覽:380
場景檢測演算法 瀏覽:613
解壓手機軟體觸屏 瀏覽:343