W13_作業二實作記錄

本篇為 [ 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' 拿掉就沒事了，但是不懂原理。

W13_作業二實作記錄

1. 先處理動態放 style 進 js

2. 把功能面切開

把 init fn export 以後，要改 webpack 設定檔

Christy

Related Posts

Comments

1. 先處理動態放 style 進 js

2. 把功能面切開

把 init fn export 以後，要改 webpack 設定檔

Christy

Related Posts

[Linux] 使用 dd 指令測試 disk IO 效能

一看就懂的 JSX 簡明入門教學指南

[筆記] Linux NFS、vsftpd server 架設

Comments