- 77·Last edited by 77 on May 13, 2021Linked with GitHubContributed by
Webpack Include 其他 HTML 檔案
在製作專案時，一定會有全站頁面共用的元件（像是 header, footer 等等），若今天碰到 header、footer 有調整需求，要一個個修改 html 檔光用想的就覺得辛苦，本次討論的是若專案並非使用前端框架來製作時該如何處理
安裝 html-loader
$ npm install --save-dev html-loader
專案目錄結構
├── README.md
├── package-lock.json
├── package.json
├── src
| ├── include
| | ├── footer.html
| | └── header.html
| ├── index.html
| └── main.js
└── webpack.config.js
準備共用元件
/src/include/header.html
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</header>
/src/include/footer.html
<footer>
Copyright © 2021 XXX. All rights reserved.
</footer>
要加入共用元件的頁面
/src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<%= require('html-loader!./include/header.html').default %>
<main>
網站內容
</main>
<%= require('html-loader!./include/footer.html').default %>
</body>
</html>
這邊會需要在 require() 後方加上 .default 否則在頁面上會顯示 [object Module]
結果
本文重點在如何使用 html-loader include 其他 html 檔，樣式的部分暫不另外做其他的設定
tags: webpack html-loader
Read more
Safari 出現 SyntaxError: Invalid regular expression: invalid group specifier name 錯誤
網站中如果有使用到正規表達式，Safari 瀏覽器會在某個正規規則下報出以下錯誤：SyntaxError: Invalid regular expression: invalid group specifier name，接著網站可能就會一片空白或是無法正常運作。 以下是我接手案子內的其中一段程式碼： transPoint(point) { // 下面這段 Safari 會報錯，必須用 RegExp 包 return point.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ','); }, 上面這段直接把正規規則包在 /.../g 裡在 Safari 上是會出錯的，需要使用 new RegExp('...', 'g') 包起來才可以，並且有使用到 \d 的部份要改用兩個反斜線來取代，例如 \d 需更改為 \\d
Oct 2, 2021npm 與 npx 之間的關係
前言 之前在看 react 的官方文件時，文中在建立一個新的 react 專案有使用到一條指令：npx create-react-app my-app，當時沒特別想說它是做什麼用的，就先照做吧～ 這幾天剛好有機會碰到了，在這邊做個筆記。 介紹 npx 是 npm v5.2.0 開始加入的一個指令，也是一個 CLI 工具 一個永久存在本機、一個臨時安裝，執行完後移除 這邊就拿 create-react-app 來舉例 以 npm 的方式來建立：
Sep 29, 2021一台電腦使用多個 Git 帳號 (SSH 金鑰)
前言 新公司專案感覺會時常使用 git，主要是想在若有緊急情況時，希望在家中也有辦法處理公司的事，剛好目前還在熟悉環境手邊暫時沒有排專案，就在公司電腦試了一下。 目標 在同一台電腦上，公司 github 帳號可以管理公司專案、私人 github 帳號可以管理私人專案 產生不同的金鑰 執行以下命令，Email 記得更換 $ ssh-keygen -t rsa -C "username@example.com"
May 13, 2021解決使用 CSS transition 造成圖片模糊／跳動的問題
在做 campaign 案時常會遇到圖片（不論是 <img> 或 css background）使用 transition 做動態時會模糊，最後到定點後會跳動一下的問題，因為一直很惱人所以就忍不住找了解法 selector { backface-visibility: hidden; transform: translateZ(0) scale(1, 1); } 加了上面的設定 Chrome 看起來問題就解決了，但不曉得為何 Safari（新生代 IE）感覺好像沒有太大的改善，於是我另外加了 will-change 屬性，Safari 看起來就好多了，以下附上我的設定： selector {
May 13, 2021
HackMD