蘋果 iPhone 13/Pro 將至:富士康已累計招募 10 餘萬人,基本滿足生產
阿新 • • 發佈:2021-09-14
實際前端開發應遵守:
- 模組化(js的模組化(把可複用的js方法或者功能抽取出來形成一個獨立的js檔案)、css的模組化、資源的模組化)
- 元件化(複用現有的U I結構、樣式、行為)
- 規範化(目錄結構的劃分、編碼規範化、介面規範化、文件規範化、git分支管理)
- 自動化(自動化構建、自動部署、自動化測試)
什麼是前端工程化?
前端工程化是指在企業級的前端專案開發中,把前端開發所需的工具、技術、流程、經驗等進行規範化、標準化。
目前主流的前端工程化解決方案:
- webpack(https://www.webpackjs.com/)
- parcel (http://zh.parceljs.org/)
什麼是webpack?
webpack是前端工程化具體的解決方案。
主要功能:它提供了友好的前端模組化開發支援,以及程式碼壓縮混淆、處理瀏覽器Javascript的相容性、效能優化等強大的功能。提高了前端開發效率和專案的可維護性。
在專案中安裝webpack (npmjs.com)
在終端執行如下的命令,安裝webpack相關的兩個包:
npm install [email protected] [email protected] -D
命令以-D(--save -dev)結尾,這兩個包會被記錄在package.json檔案下的devDependencies中,表示這個包只用於開發生產時使用。
以-S(--save)為字尾的命令表示包會被記錄在package.json檔案下的dependencies中,表示這個包用於開發生產和專案上線後。
webpack的基本使用
- 在專案根目錄中,建立名為webpack.config.js的webpack配置檔案,並初始化如下的基本配置:
moudle.export={ mode:'development'} //用來指定構建模式,可選值有development和production。
mode節點的可選值有兩個,分別是:
- development 開發環境,不會對打包生成的檔案進行程式碼壓縮和效能優化;打包速度快,適合在開發階段使用。
- production 生產環境,會對打包生成的檔案進行程式碼壓縮和效能優化;打包速度很慢,僅適合在專案的釋出階段使用。
2.在package.json的scripts節點下,新增dev指令碼如下:
"scripts" :{ "dev": "webpack" //script節點下的指令碼,可以通過 npm run執行,例如:npm run dev }
3.在終端執行 npm run dev 命令,啟動webpack進行專案的打包構建。在目錄中生成了。 一個dist資料夾,裡面有一個mian.js,將這個js檔案引入到html頁面內,便可解決相容性問題。