兩個有用的微前端框架

乾坤 無界

實際的前端開發(fā)

• 模塊化（js的模塊化，CSS的模塊話，資源的模塊化）
• 組件化（復(fù)用現(xiàn)有的UI結(jié)構(gòu)、樣式、行為）
• 規(guī)范化（目錄結(jié)構(gòu)的劃分、編程規(guī)范化、接口規(guī)范化、文檔規(guī)范化、Git分支管理）
• 自動化（自動化構(gòu)建、自動部署、自動化測試）

webpack實際應(yīng)用

指令

- npm init -y                                           初始化包管理文件package.json
- npm install packageName -S                            -S明確告訴npm所加載的包進入到dependencies目錄下，該目錄下的配置是開發(fā)環(huán)境和線上環(huán)境都能用到的
- npm install webpack@版本號 wbpack-cli@版本號 -D         安裝webpack，-D明確告訴npm所加載的包進入devDependencies目錄下，該目錄下放置只在開發(fā)環(huán)境能用到的資源- 注意：-S：是--save的簡寫-D：是--save-dev的簡寫

基本使用

1. 在項目的根目錄下創(chuàng)建一個webpack.config.js的webpack配置文件，并初始化如下的基礎(chǔ)配置：

    module.exports = {mode: 'development'}

2. 在package.json的scripts節(jié)點下，新增的腳本如下：

    "scripts": {"dev": "webpack"}

3. 在終端中運行npm run dev命令，啟動webpack進行項目的打包構(gòu)建

4. webpack的基本使用

   4.1：mode的可選值

   mode節(jié)點的可選值有兩個，分別是

   1. development

   • 開發(fā)環(huán)境
   • 不會對打包生成的文件進行代碼壓縮和性能優(yōu)化
   • 打包速度快，適合在開發(fā)階段使用

   2. production

   • 生產(chǎn)環(huán)境
   • 會對打包生成的文件進行代碼壓縮和性能優(yōu)化
   • 打包速度很慢，僅適合在項目發(fā)布階段使用

   4.2 webpack.config.js 文件的作用

   • webpack.config.js是webpack的配置文件。webpack 在真正開始打包構(gòu)建之前，會先讀取這個配置文件從而基于給定的配置，對項目進行打包。
   • 注意:由于 webpack 是基于 node.is 開發(fā)出來的打包工具，因此在它的配置文件中，支持使用 node.js 相關(guān)的語法和模塊進行 webpack 的個性化配置。

   4.3 webpack的默認(rèn)約定

   在webpack4.X和webpack5.X的版本中，有如下的默認(rèn)約定：

   1. 默認(rèn)的打包入口文件為src -> index.js
   2. 默認(rèn)的輸出文件路徑為dist -> main.js
   3. 注意：可以在webpack.config.js中修改打包的默認(rèn)約定

   4.4自定義打包的入口與出口

   在webpack.config.js配置文件中通過entry節(jié)點指定打包入口。通過output節(jié)點指定打包的出口

   const path = require('path')
   module.exports = {entry: path.join(__dirname, "../src/index.js"),     // 打包入口的文件路徑output: {path: path.join(__dirname, "./dist"),       // 輸出文件的存放路徑filename: 'bundle.js'       // 輸出文件的名稱}
   }
   

webpack中的插件

1. 插件的作用

   • 通過安裝第三方的插件，可以拓展webpack的能力，從而讓webpack用起來更方便。最常用的webpack插件有以下兩個：

   1. webpack-dev-server

   • 類似于node.js階段用到的nodemon工具
   • 每當(dāng)修改了源代碼，webpack會自動進行項目打包和構(gòu)建

   2. html-webpack-plugin

   • webpack中的Html插件（類似于一個模板引擎插件）
   • 可以通過此插件自定制index.html頁面的內(nèi)容

2. 2.1 安裝webpack-dev-server
   運行如下的命令，即可在項目中安裝這個插件：npm install webpack-dev-server@版本號 -D
   2.2 配置webpack-dev-server

   1. 修改package.json->scripts中的dev命令如下：

       "scripts": {"dev": "webpack serve"}
   

   2. 再次運行npm run dev命令
   3. 在瀏覽器中訪問http://localhost:8080/地址，查看自動打包效果
      注意：webpack-dev-server會啟動一個實時打包的http服務(wù)器

   注意： 我配置完這些之后，訪問http://localhost:8080/報錯了，not get 404，我按照下面的步驟解決了一下：

   1. 我先是輸入http://localhost:8080/webpack-dev-server看看能不能看到webpack儀表盤
   2. 再看http://localhost:8080/bundle.js看看能不能看到打包成功的文件(為了確保萬無一失，全局搜索一下自己寫的代碼)
   3. 發(fā)現(xiàn)上面都沒問題之后，查閱文檔說要配置靜態(tài)文件目錄

   devServer: {static: {directory: path.join(__dirname, 'src'), // 如果 HTML 在 src/ 目錄},
   },
   

   4. 但是我配置完之后，發(fā)現(xiàn)我的js代碼并沒有生效，查閱資料說index.html什么默認(rèn)不會注入打包的bundle.js，這個看上去不知道咋理解，以為我已經(jīng)使用

錯誤類型與解決

Uncaught SyntaxError: Cannot use import statement outside a module

SyntaxError：語法錯誤