blog
blog copied to clipboard
lmk123
个人技术博客，博文写在 Issues 里。
在[npm workspaces 踩坑记录](https://github.com/lmk123/blog/issues/115)中，我最终使用了 yarn v1 来解决依赖无法安装的问题，但在用了几天 yarn v1 之后，发现它对 workspaces 的支持还是比较少的，而且也有一些问题（比如[这个](https://github.com/yarnpkg/yarn/issues/4878#issuecomment-386607832)），但我又实在不想用 yarn v2，于是我又来想办法切换回 npm 了。 先说结论：我最终使用 [@hcfy/react-shadow](https://www.npmjs.com/package/@hcfy/react-shadow) 替换了 [react-shadow](https://www.npmjs.com/package/react-shadow)。 一开始我是不想单独创建一个包的，我还是寄希望于 npm 新增的 [overrides](https://docs.npmjs.com/cli/v8/configuring-npm/package-json?v=true#overrides)，但最终只有创建一个新包才能解决问题，在此记录一下踩坑过程。 我先是删掉了 yarn.lock 和 node_modules，然后运行了 `npm i`，报错如下： ```...
最近我在尝试使用 monorepos 的方式管理代码，我第一个想到的工具就是 [Lerna](https://lerna.js.org/)，因为我已经在很多项目中看到过 Lerna 了，最典型的就是 [Babel](https://github.com/babel/babel)。 不过，在阅读 Lerna 文档的过程中，我看到了另一个工具的名字——[Nx](https://nx.dev/)。Lerna 的文档中有如下描述： > Nrwl (the company behind the open source build system Nx) has taken over [stewardship of Lerna](https://dev.to/nrwl/lerna-is-dead-long-live-lerna-3jal). 我的理解如下：Lerna 是一个很老牌的管理工具，已经很久没有更新过了，于是有一天...
先放结论：**不要用 NPM，用 Yarn v1**（v2 没试过）。 ----------------------- 最近准备使用 Workspaces 的方式组织代码，为此，我打算创建一个新的项目。 在这之前，我的包管理器一直使用的是 yarn v1，但考虑到[我不打算切换到 yarn v2](https://github.com/lmk123/blog/issues/103)，所以我决定重新开始用 npm，没想到之后花了很长时间才发现，还是 yarn 香。 我的项目结构大致是这样： ``` ├─ packages │ ├─ PackageA 两个版本的 react 会导致很多问题：typescript 报错、测试工具报错、项目的组件运行的不是同一个 react 的...
目前，我的项目没有用到 babel，因为我认为我的目标用户应该都有足够高的浏览器版本，所以我是直接使用 tsc 来编译 ts 代码的，且 tsconfig 的 target 设为了 `ESNext`，这意味着完全不会有 polyfill 打包进最终的生成的代码里。 但随着我使用的新特性越来越多，对浏览器版本的要求也越来越高，所以我还是决定为项目引入 babel。 # TypesScript VS Babel 首先要了解直接用 TypesScript 编译（`ts-loader`、`tsc`）和用 Babel 编译（`babel-loader`、`@babel/preset-typescript`）的区别。 直接用 TypeScript 编译的话，TypeScript 做了两件事情：编译代码和检测类型，而用 Babel 编译的话，Babel...
前段时间，我发布了划词翻译 v9.0.0，这个版本其实就只是把所有依赖项升级到了最新版本，其中就包括把 React 17 升级到了 React 18。升级完成后我大致测了一下，没有问题，但今天突然发现：划词翻译的翻译窗口不能拖动了。 翻译窗口的拖动功能大致可以简化成以下代码： ```js function App() { // 组件的其它状态忽略掉… const containerRef = useRef(null) useAddDrag(containerRef.current) return 翻译结果 } ``` 在写这个代码的时候，我很清楚，当 `containerEleRef.current` 从 `null` 变为具体的 div 元素时，是不会引起组件重新渲染的，但我认为组件内还有很多其它状态会引起组件重新渲染，所以...
最近在逛 GitHub 的时候，无意间发现有个项目的 package.json 里写了 `sideEffects: false`，搜了一下发现大有用处，我准备用在项目里。 先贴一些参考文档，等我消化完了之后会单独再更新一篇文章 - [Tree Shaking | Webpack](https://webpack.js.org/guides/tree-shaking/) - [Everything you never wanted to know about side effects](https://sgom.es/posts/2020-06-15-everything-you-never-wanted-to-know-about-side-effects/) - [Webpack 中的 sideEffects 到底该怎么用？](https://zhuanlan.zhihu.com/p/40052192) - [你的...
在写测试时，我经常需要提前准备好测试代码，比如如果我想测试下面这个模块： ```js // testMe.ts import otherModule from 'other-module' // 读取其它模块的值 const id = otherModule.id // 读取环境变量 const key = process.env.KEY // 读取全局变量 const ua = navigator.userAgent export function testMe() {...
[划词翻译](https://hcfy.app)的源码是用 monorepo 的形式组织的，目录结构类似于这样： ``` hcfy/ ├── node_modules/ ├── apps/ │ └── browser-extension/ ├── packages/ │ ├── utilsA/ │ │ ├── dist/ │ │ │ ├── index.js │ │ │ ├──...
最近准备把一个 Node.js 项目打包成一个单一的可执行文件，因为对于没有编程经验的人来说，纯 Node.js 项目很难部署成功，我也顺便学习一下打包单应用的方法。 先说结论：最终我决定改为使用 Electron。现在，我来分享一下打包单应用的过程以及最后为什么做这个决定。 ## 选择工具 Node.js 官方已经实验性的支持了打包单应用的功能：https://nodejs.org/api/single-executable-applications.html 但是考虑到这个功能还是实验性的，所以我还是准备先用第三方工具来尝试。 打包 Node.js 应用的工具在以前有两个：[pkg](https://github.com/vercel/pkg) 和 [nexe](https://github.com/nexe/nexe)。其中 pkg 已经不再维护了，于是我准备试一下 nexe。尝试之前，我看到有人[在 issues 里抱怨](https://github.com/nexe/nexe/issues/1096)，说最简单的 hello world 都跑不起来，不过我还是试了一下，结果真的失败了。 最后我还是选择了 Node.js 官方的工具（后文称之为 `SEA`），至少 hello...