jsweeta / dynamic-form Goto Github PK

前端模块化

MDN JavaScript模块化
https://www.cnblogs.com/echoyya/p/14577243.html

CommonJS

nodejs所应用的模块化方案。

CommonJS规范](https://wiki.commonjs.org/wiki/Modules/1.1)

AMD诞生的背景

在正常的服务器环境下，单纯只靠CommonJs基本上就够了，因为资源都在服务器的硬盘上，加载文件的快慢单纯就算磁盘读写速度决定的，但是对于浏览器环境的话，一个模块的加载是需要通过网络的，等待时间取决于网速的快慢，可能需要等很长时间，因此，AMD诞生了——异步模块定义。

问题的原因是分包后的文件命名是 [name]-[hash].[ext]，这样就导致了打包后的文件名会变化
而如下引用时

import xxx from '@/xxx'

这个入口是由package.json内的main，module等这些字段控制的，如果进行分包的话，这些main，module字段怎样设置，怎样实时改动。

1. 查阅eslint文档 https://eslint.org/docs/latest/use/command-line-interface 了解cli工具的options，查阅文档 https://eslint.org/docs/latest/use/configure/ignore 了解eslint默认忽略的文件
2. 查阅链接https://prettier.io/docs/en/options了解prettier各项配置
3. 查阅prettier文档 https://prettier.io/docs/en/cli 了解cli工具的options, 查询链接https://prettier.io/docs/en/watching-files, https://www.npmjs.com/package/onchange 获取onchange文档，
4. eslint和prettier协同工作的相关文档文章链接 https://prettier.io/docs/en/comparison，https://prettier.io/docs/en/integrating-with-linters，https://khalilstemmler.com/blogs/tooling/prettier/
5. 与prettier插件有冲突的两个eslint核心规则的issue https://github.com/prettier/eslint-plugin-prettier/blob/master/README.md#arrow-body-style-and-prefer-arrow-callback-issue
6. husky文档 https://typicode.github.io/husky/
7. lint-staged文档 https://www.npmjs.com/package/lint-staged
8. commitint 文档 https://commitlint.js.org/#/，https://commitlint.js.org/#/guides-local-setup?id=install-commitlint
9. commitizen和cz-conventional-changelog文档 https://www.npmjs.com/package/commitizen，https://www.npmjs.com/package/cz-conventional-changelog

当在根目录的 .d.ts 文件中声明 @monorepo/utils 时，它并不会自动地在 src 目录下的 index.vue 文件中生效。这是因为 TypeScript 默认只会解析与当前文件相同目录或子目录下的 .d.ts 文件。

要使根目录的 .d.ts 文件中的声明在 src 目录下的 index.vue 文件中生效，你可以采取以下几种方式：

1. 使用相对路径引入：在 index.vue 文件中使用相对路径引入根目录的 .d.ts 文件。例如，如果根目录的 .d.ts 文件名为 global.d.ts，可以在 index.vue 文件中添加以下引入语句：

import '@/global.d.ts';

这样，根目录的 .d.ts 文件中的声明就会在 index.vue 文件中生效。

2. 配置 TypeScript 编译选项：在 TypeScript 配置文件 tsconfig.json 中，可以将根目录的 .d.ts 文件包含到编译过程中。在 tsconfig.json 文件的 include 字段中添加根目录的 .d.ts 文件的路径。例如：

{
  "compilerOptions": {
    // ...
  },
  "include": [
    "src",
    "global.d.ts"
  ]
}

这样，根目录的 .d.ts 文件中的声明也会在 src 目录下的文件中生效。

3. 将 .d.ts 文件放置在与 index.vue 同级的目录：将根目录的 .d.ts 文件放置在与 index.vue 同级的目录中，这样它会被默认解析并在 index.vue 文件中生效。

请注意，以上方法只是使根目录的 .d.ts 文件中的声明在 index.vue 文件中生效的一些常见方式。具体的解决方法可能会因项目结构和配置而有所不同。