aiden-art/blog

个人博客

blog

个人博客

blog's Issues

vue3 packages打包逻辑分析

关于在nodejs中使用ES module遇到的问题

1. 在 NodeJS 中使用 ES Modules的两种方式

Node verison 13.2.0 起开始正式支持 ES Modules 特性。

在 Node 中使用ESM有两种方式：

• 在 package.json 中，增加 "type": "module" 配置,文件名还是以.js结尾
• 在 .mjs 文件可以直接使用 import 和 export；

2. node xx.js报错ERR_MODULE_NOT_FOUND

在1的基础上，使用Node运行文件还是报错了，可能是import时没有指定js后缀
比如：import bootstrap from "../lib/index"->import bootstrap from "../lib/index.js"

目前tsc编译后的文件都不带后缀，所以想要正确执行，可以node --experimental-modules --es-module-specifier-resolution=node xx.js

关于tsc编译时能否自动带上`.js``后缀？

3. "__dirname 在ES module下提示未定义"

解决办法如下:

import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
console.log(__dirname)

4. import json文件会采取commomjs的方式读取内容

可以使用fs读取文件内容

const pkg = JSON.parse(fs.readFileSync(path.resolve(__dirname, "../../package.json"), "utf8"))

关于.eslintignore不生效的解决办法

在开发monorepo项目时，发现packages下面的项目.eslintignore不生效，解决方法如下：

vscode默认只会识别根目录下这个文件,一个配置项可以指定工作目录：eslint.workingDirectories,值有四种类型：

• [{ "mode": "location" }] 默认模式，取当前根目录。

• [{ "mode": "auto" }] 根据package.json .eslintignore .eslintrc* 三个文件去确定一个工作目录，但是不太推荐使用，因为会导致一些意料不到的问题。

• string[] 手动指定目录列表，可以用，但是要经常维护

• [{ "pattern": "./packages/*/" }] 最好的解决方案，通过正则匹配，特别适合monorepo项目结构。

关于eslint prettier vscode插件与npm包的区别

在项目中,为了代码检查和风格检查，会安装ESlint,Prettier等工具，但是有一个疑问在于：为什么编辑器（vscode）已经安装了插件，还需要额外在项目中安装对应的npm包？

ESlint

vscode中的ESlint插件仅仅只是ESlint插件，其本质还是会调用项目本地或全局安装的ESlint（npm包），然后将ESlint的报错反馈给vscode，因此我们可以直接在编辑器中看到错误，所以说ESlint必须依赖本地安装/全局安装的ESlint才可以正常工作。

npm包安装的ESlint包，可以在命令行执行ESlint命令时，去触发检测代码，并把不符合lint规则输出到命令行终端,需要与ESlint配置文件配合使用，该配置文件的生效顺序是就近原则。

Prettier

Prettier的作用规则同Eslint一致。

• ESLint主要负责: 质量检查(例如使用了某个变量却忘记了定义)、风格检查

• Prettier主要负责: 风格检查, 没有质量检查

需要注意一点就是：由于会出现引入多个风格检查的插件和配置lint，这就导致存在部分会与Prettier的lint出现冲突。因此需要lint预设包eslint-config-prettier，这个包的作用是先关闭这些与Prettier冲突的lint规则，然后之后再启用Prettier的规则，使得冲突的lint规则以Prettier为准。