自定义组件库打包流程package.json 文件中的 peerDependencies package.json 文件

`package.json` 文件中的 `peerDependencies`

package.json 文件中的 peerDependencies 字段用于声明您的包依赖的其他包的版本范围，同时也向您的包的用户发出了对这些依赖项的要求。

当其他开发者使用您的包作为依赖时，npm 或 yarn 会确保这些依赖项已经安装，并且满足指定的版本要求。

示例 package.json 文件：

json
{
  "name": "my-package",
  "version": "1.0.0",
  "peerDependencies": {
    "vue": "^2.6.0"
  }
}

上面的例子中，my-package 声明了对 vue 包的 ^2.6.0 版本的依赖（这意味着 2.x.x 的任何版本都可以，但是必须至少是 2.6.0 或更高版本）。

当其他开发者安装 my-package 时，npm 或 yarn 会确保安装了满足 vue@^2.6.0 要求的正确版本。

通过声明 peerDependencies，您可以确保您的包在正常运行所需的依赖项被正确安装，并且防止可能出现的依赖项版本不匹配问题。

希望这可以解答您的问题！如还有疑问，请随时提问。

pnpm run -C internal/build start 中的pnpm run -C

在命令行中，pnpm run 是用于运行 package.json 文件中定义的脚本命令的一种方式。-C 是 pnpm 的一个选项，用于指定脚本命令执行的目录。

具体来说，pnpm run 用于运行 package.json 文件中 scripts 部分定义的脚本命令。以下是一个示例的 package.json 文件：

json
{
  "name": "my-package",
  "version": "1.0.0",
  "scripts": {
    "start": "node app.js",
    "build": "webpack",
    "test": "jest"
  }
}

package.json packageManager 指定包管理器的字段

官网：docs.npmjs.com/cli/v9/conf… "engines": { "node": ">=18.16.3 <20.03.0", "pnpm": ">=8.7.5" },packagemanage

在package.json文件中，有一个用于指定包管理器的字段，称为“packageManager”。该字段用于告知其他开发者该项目使用的是哪个包管理器。

使用packageManager字段可以提供以下几个好处：

指定包管理器：如果项目使用的是非默认的包管理器（如使用Yarn而不是npm），在package.json中使用packageManager字段可以明确指定。
统一开发环境：由于不同的包管理器可以有不同的特性和行为，使用packageManager字段可以确保所有开发者在同一开发环境中工作。这可以避免由于使用不同的包管理器而导致的问题和冲突。
文档和脚本的一致性：通过使用packageManager字段，在项目文档和脚本中可以使用一致的命令和示例，使项目更易于理解和维护。

packageManager字段定义在package.json文件的“engines”字段内，格式如下：

js
"engines": {
  "packageManager": "npm"
}

在上述示例中，使用npm作为包管理器。将该字段设为"yarn"或"pnpm"即可指定其他包管理器。

请注意，在使用packageManager字段时，确保您的项目中已经安装了对应的包管理器。否则，其他开发者在使用不支持的包管理器时可能会导致问题。

pnpm i 报错

官网：pnpm.io/zh/ 报错


pnpm i
 ENOENT  ENOENT: no such file or directory, mkdir '/path'

解决方法：

pnpm config set store-dir ~/pnpm

# pnpm-workspace 作用

pnpm-workspace是pnpm包管理器的一个特性，提供了一种管理多个相关项目的能力。它的作用是通过共享依赖项来优化项目之间的依赖管理，提高效率和性能。

使用pnpm-workspace有以下几个优点：

共享依赖项：在pnpm-workspace中，可以将公共依赖项安装在根目录的一个单独位置，并且可以在多个项目之间共享使用。这样可以减少项目之间重复的依赖项，节省磁盘空间，并且减少安装和更新依赖项的时间。
利用本地缓存：pnpm-workspace会在根目录中维护一个本地缓存，用于存储公共依赖项的二进制和存档文件。这样，在不同的项目中安装相同的依赖项时，会直接使用缓存，避免了重复下载和解压缩的过程。
统一版本管理：如果多个项目使用相同的依赖项，pnpm-workspace会确保它们使用相同的版本，避免了版本冲突和一致性问题。
简化项目结构：使用pnpm-workspace可以将多个相关项目组织在一个根目录下，简化了项目结构和代码管理。

使用pnpm-workspace的步骤如下：

在根目录的package.json中添加"workspaces"字段，指定项目所在的子目录或包含符号"*"的模式。示例：

json
"workspaces": [
  "packages/*"
]

在子目录创建各个项目的package.json文件，并在其中添加各项目的依赖项。
运行pnpm install命令，pnpm将会在根目录的node_modules和.local目录下安装依赖项，并在子项目中创建符号链接。

值得注意的是，使用pnpm-workspace需要确保项目中安装了pnpm包管理器，可以通过npm install -g pnpm命令进行安装。

pnpm i xxx xxx -r -D 开发依赖的每个文件一次都安装

pnpm i vite typescript -r -D

pnpm i xxx -D -w 安装在root下的开发依赖

pnpm i eslint @mistjs/eslint-config-vue -D -w

查看npm代理

要查看 npm 的代理设置，您可以使用以下命令：

js
npm config get proxy

这将显示当前设置的 npm 代理。如果您没有设置代理，它可能会返回空值或未设置的状态。

如果您想查看npm的HTTPS代理设置，可以使用以下命令：

js
npm config get https-proxy

同样地，如果未设置HTTPS代理，它可能会返回一个空值。

另外，还可以使用以下命令来查看npm的所有配置信息：

js
npm config list

这将显示npm的所有设置，包括代理设置、注册表URL、缓存路径等。

请注意，如果您在使用代理服务器时遇到问题，请确保代理服务器正确配置并可访问。

unbuild 配置

github.com/unjs/unbuil… 安装

npx unbuild

npm link

进入组件库的根目录执行npm link,mac权限不够，可使用sudo npm link 查看全局组件库软链 npm ls -g 进入引入组件库的 npm link xxxx 查看是否引入在项目中nodeModules查看是否有该组件

npm unlink

卸载 npm link的软链或直接进入安装目录直接删除 mac 也可执行 sudo npm link xxx -g

npm -r -d

npm -r -d 是一条针对 npm 命令行工具的选项和参数。

-r 选项是指启用只读模式（read-only mode）。给项目中给所有packjson安装依赖
-d 选项是指启用详细输出（verbose output）。

具体说明如下：

只读模式（-r）：在只读模式下，npm 命令将只能读取现有的包和依赖信息，但不会对它们进行任何更改。这通常用于在不影响任何内容的情况下，查看关于包或依赖的详细信息。
详细输出（-d）：通过启用详细输出，npm 命令将提供更多关于正在执行的操作的详细信息。这对于调试和了解命令运行情况非常有用。

请注意，选项和参数的含义可能因 npm 版本和具体命令而有所不同。因此，在具体使用时，请参考适用版本的 npm 文档或运行 npm --help 命令以获取相关选项和参数的准确信息。

verdaccio

遇到的问题：版本号重复不能发布

需要配置 npm set registry 本地安装，远程部署本地有没提交的文件不能发布，报错如图 github.com/verdaccio/v…

安装

npm i verdaccio -g

设置代理

npm set registry http://127.0.0.1:4873

设置npm 为多个仓库

npm config set @mogo:registry=http://127.0.0.1:4873

发布代码包

npm publish --registry <http://localhost:4873/

项目下载已发布的代码包

将git作为npm 包管理器

eslint 和标准的配置

github.com/mistjs/esli…
eslint 只安转 vue版本

pnpm add -D eslint @mistjs/eslint-config-vue

安装ts 和配置

pnpm i @vue/tsconfig -r -D

vue3 jsx setup写法

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MgButton',
  setup() {
    return () => (
      <div>
        <p>This is a functional component written in JSX.</p>
      </div>
    )
  }
})

vite press 文档

安装

pnpm add -D vitepress

初始化

文件路径

添加.gitignore

文件路由规则

vitepress.dev/guide/routi… 页面路由的先后顺序

默认主页

index.md 使用vitepress 默认的home页

左边侧边栏路由

在config中配置

themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: '指南', link: '/en-US/guide/intro' },
      { text: '组件', link: '/en-US/component/button' }
    ],

    sidebar: {
      '/en-US/guide': [
        {
          text: '指南',
          items: [
            { text: '简介', link: '/en-US/guide/intro' },
            { text: '快速开始', link: '/en-US/guide/quickstart' },
            { text: 'FAQ', link: '/en-US/guide/faq' }
          ]
        }
      ],
      '/en-US/component': [
        {
          text: '组件',
          items: [
            { text: 'Button', link: '/en-US/component/button' },
            { text: 'Link', link: '/en-US/component/link' }
          ]
        }
      ]
    },

    socialLinks: [{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }]
  }

nav导航添加子目录

在config中配置

nav: [
      { text: '指南', link: '/en-US/guide/intro' },
      { text: '组件', link: '/en-US/component/button' },
      {
        text: '版本',
        items: [
          { text: 'v0.0.1', link: '/en-US/version/0.0.1' },
          { text: 'v0.0.1', link: '/en-US/version/0.0.2' }
        ]
      }
    ],

titles和logo配置

在config中配置

配置titles

配置logo

注意点：不支持中文的简码图片名称，如这样的名称不支持 Logo_Tech%2520UI.svg
网络logo
本地logo

 themeConfig: {
   siteTitle: 'Pro Components Site11', // 站点title
   logo: '/public/Logo_Tech%2520UI.svg', // 站点前的图标
   // logo: 'https://element-plus.org/images/element-plus-logo.svg',
   }

.md基础样式设置和标签展示

直接添加dev
给dev添加样式
给title添加样式
展示tip

# Button{.title}

Commonly used button.

<div class="color" style="background-color: #f0f2f5;padding: 10px;border-radius: 4px;">基础用法</div>

<style>
    .color{
        color: cyan;
    }
    .title{
        color:yellow;
    }
</style>

:::tip
添加提醒
:::

添加tailwind css 或unnocss

在docs中配置文件

项目文件配置，

创建ts 文件配置
创建 vite.config.ts
引入编译vue的插件

pnpm i element-plus @element-plus/icons-vue axios vue -
S

pnpm i @types/markdown-it @vitejs/plugin-vue-jsx unocss vite -D

自动引入 vitepress下的主题组件

下载

pnpm i unplugin-vue-components/vite  unplugin-icons/resolver unplugin-icons/vite -D

配置

在vite.config.ts 引入

import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

在plugin 中配置

 Components({
     dirs: ['.vitepress/vitepress/components'],

     allowOverrides: true,

     // custom resolvers
     resolvers: [
       // auto import icons
       // https://github.com/antfu/unplugin-icons
       IconsResolver()
     ],

     // allow auto import and register components used in markdown
     include: [/\.vue$/, /\.vue\?vue/, /\.md$/]
   })

自动引入elment plus组件

在plugin配置

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//引入

//配置plugin

AutoImport({
     resolvers: [ElementPlusResolver()]
   }),

动态渲染svg图标

安装

 npm i -D unplugin-icons

引入

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

配置

plugin:[
 Icons(),
  Components({
    dirs: ['.vitepress/vitepress/components'],

    allowOverrides: true,

    // custom resolvers
    resolvers: [
      // auto import icons
      // https://github.com/antfu/unplugin-icons
      IconsResolver()
    ],

    // allow auto import and register components used in markdown
    include: [/\.vue$/, /\.vue\?vue/, /\.md$/]
  })
]

启动vitepress报错

- 问题一：

> mogo-pro-libs@0.0.19 docs:dev /Users/administator/mgpro/map/webMapSDKTest
> vitepress dev docs

✘ [ERROR] "vitepress" resolved to an ESM file. ESM file cannot be loaded by `require`. See https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]

解决方法：在docs 下的package.json 添加 "type": "module"

- 问题二：tsconfig配置错误，可以直接用elment-plus的在vitepress的tsconfig

- 问题三

[vitepress] Internal server error: At least one or

解决方法：卸载 pnpm uninstall @vitejs/plugin-vue add the plugin. VitePress already includes it. Configure it using vitepress config: vitepress.dev/reference/s…

自定义主题

在.vitepress中创建 theme 文件夹
在theme创建 index.ts

// eslint-disable-next-line import/no-named-as-default
import DefaultTheme from 'vitepress/theme'

import VPApp from '../vitepress'

export default {
 ...DefaultTheme,
 enhanceApp({ app }) {
   app.component('VPApp', VPApp)
 },
}

创建一个组件VPApp的组件

使用markerdown

- 安装

```

pnpm install markdown-it --save pnpm i @types/markdown-it -D pnpm i markdown-it-container -D

自定义组件库打包流程

package.json 文件中的 peerDependencies

pnpm run -C internal/build start 中的pnpm run -C

package.json packageManager 指定包管理器的字段

pnpm i 报错

# pnpm-workspace 作用

pnpm i xxx xxx -r -D 开发依赖的每个文件一次都安装

pnpm i xxx -D -w 安装在root下的开发依赖

查看npm代理

unbuild 配置

npm link

npm unlink

npm -r -d

verdaccio

将git作为npm 包管理器

eslint 和标准的配置

安装ts 和配置

vue3 jsx setup写法

vite press 文档

安装

初始化

文件路径

文件路由规则

默认主页

左边侧边栏路由

nav导航添加子目录

titles和logo配置

配置titles

配置logo

.md基础样式设置和标签展示

添加tailwind css 或unnocss

在docs中配置文件

自动引入 vitepress下的主题 组件

下载

配置

自动引入elment plus组件

动态渲染svg图标

启动vitepress报错

- 问题一：

- 问题二 ：tsconfig配置错误，可以直接用elment-plus的在vitepress的tsconfig

- 问题三

自定义主题

使用markerdown

`package.json` 文件中的 `peerDependencies`

自动引入 vitepress下的主题组件

- 问题二：tsconfig配置错误，可以直接用elment-plus的在vitepress的tsconfig