令人抓狂的开发瞬间·PAGENOTE

希望能帮助到有同样问题的谁。长期更新。

变更日期	变更内容
2024-01-09	初始化

引入 ESM 包失败

背景：ESM 相比于 CommonJS 有比较明显的优势是，TS。可以更加方便的让使用者了解类型。所以有一些包按照 ESM 发布。

现象：但在 Next.js 引用这些包时，会出现奇怪的现象：run dev 阶段可以正常运行，但是 build 阶段则会报错。Cannot use import statement outside a module。

修复方式：next.config.js 中配置：


{
	transpilePackages: ['@pagenote/bridge'] // 这样就可以正常解析 ESM npm 包了。
}

建议：如果自己对外提供 npm 包，最好提供两种类型的产物。

.yml 不支持转义空格

在Gitlab 中配置一条自动化流水线：


git status --porcelain && git add -u && 
git commit -m "chore: commit by ci"

自动检测将产物提交commit ，但是 yml 中会将所有的 : 分割当作键值对，除非 : 之后没有空格 才会被当作字符串处理。否则就是格式错误，无法运行。

而 git 的提交规则必须要求 type: subject 格式，且:之后必须跟空格。两者形成了冲突。一个需要一个不能。

GitLab CI 运行的基础环境，不在具体分支，而是基于 commit ID

背景：在 CI 中完成特定指令后需要将特定文件，commit 后，并 push。但总是 push 失败，一直以为是 CI 环境的运行环境、账号权限问题。

问题：CI 在运行时，是基于 commitID 拉取的代码，没有分支概念，所以需要手动 git checkout [分支] 才能正确地执行 git push

通过 innerHTML 或者 react dangerouslySetInnerHTML 写入代码片段，如果包含 script 标签，script 不会被执行。该限制来源于 HTML5 规范。为了避免该问题，可以通过 SSR 方式，在服务端完成插入逻辑。

最令人抓狂的，永远是下一个问题

script 标签会阻塞 DOM 渲染的直观示例：Google ads 在运行时，尽管前序 DOM 节点已经存在，但并未被浏览器渲染。

掐断了另一种远程代码执行的可能性和一些库的本地使用（zip.js）

解决办法：zip.js → jszip