本篇為 [ MTR05 ]_第十三週（07/05 ~ 07/11）：現代前端工具_帶著做留言板 plugin 的實作記錄
簡直大開眼界，老師在做什麼神奇的事情！把一個留言板包成 plugin，還解決了同一頁可以支援多個留言板的問題！太帥了！
記錄錯誤，第一個犯的錯是 apiUrl 設錯了，卡了半天
第二個錯誤是 fn 沒有 export，隔天又發現了
第三個錯誤是 'Identifier 'commentDOM' has already been declared. (31:8)'
這個把那一行拿掉就沒事了，但不懂原理。
每次都隔一下或隔天就解開了...大概是因為累了，所以無法清楚的思考呢？
這裡要解決的問題是，怎麼保持清晰的頭腦？
思考的問題：plugin, extension 的差別？
此作業的目標，把 w12 SPA 的留言板，變成一個 plugin，並用 webpack 包成一個 library。
內容只能有 js 動態新增，意思是說，css 或者任何 html tag 都不會存在
part1: 主要在把 w12 的 SPA 留言板，改成 plugin 的形式，寫一個 init 的函式，一個 siteKey 對應一個留言板。
part2: 把功能切開，分成幾個部分
1. 先處理動態放 style 進 js
- 但我沒有做，因為用 bootstrap 寫了 inline css 了
// 在上面先把 template 寫好
const css = `
.card { margin-top: 12px; }
`
// 用 js 動態把 css 放進來
const styleElement = document.createElement('style')
styleElement.type = 'text/css'
styleElement.appendChild(document.creatTextNode(css))
dcument.head.appendChild(styleElement)
2. 把功能面切開
index.js：主要的程式碼都在這，init export 出去就可以用了(記得改 webpack 的 config 檔)
api.js：負責抓取留言跟新增留言 api
templates.js：負責 html tag 及載入更多按鈕的模板
utils.js：放一些工具類的函式
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<title>W13 留言板 plugin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="./dist/main.js"></script>
// 主要是下面這一段，這樣就變成一個 plugin 了
<script>
$(document).ready(() => {
commentPlugin.init({
siteKey: 'christy',
apiUrl: 'https://mentor-program.co/mtr04group6/christy/week12/hw1',
containerSelector: '.comment-area'
})
})
</script>
</head>
<body>
<div class="container">
<div class="comment-area"></div>
</div>
</body>
</html>
把 init fn export 以後，要改 webpack 設定檔
任何人在他自己的 index.html 引入完我們寫的這個 library 以後，會有一個 global 的變數叫做 commentPlugin
因此要在 webpack config 加一行設定
Externalize Lodash：把函式庫外部化
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
library: 'commentPlugin', // 要加這一行
},
part3 + part4: 把模板改成不容易衝突、class name 取名的問題
出現一個錯誤訊息是：
SyntaxError: /Users/christy/Webpack/src/index.js: Identifier 'commentDOM' has already been declared. (31:8)
按照影片說的把全部變數都放進函式裡面，但是出現上面的錯誤，可能是因為設了變數但是沒有用到它？我把 'let commentDOM = null' 拿掉就沒事了，但是不懂原理。
透過yml設定檔注入參數至特定資料結構_@jnjjiu-wei_https://static.coderbridge.com/images/covers/default-post-cover-3.jpg)