lerna创建组件库环境搭建

不减20斤不改头像
786 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情

介绍

Lerna 是用于 TypeScript/JavaScript的原始monorepo 工具。它已经存在多年，被数以万计的项目使用，包括 React、Jest 和 Babel。

开始😄

全局安装lerna

npm install -g lerna

创建 lk-element 目录 ，进入目录初始化

lerna init

修改生成的learn.json，增加一项配置,使用yarn来管理依赖

...
"npmClient":"yarn"
...

新建一个button组件

lerna create button

组件名称可以按需加一个统一的前缀，然后其他项根据实际情况自行修改，一路回车，在packages里生成一个button文件夹，里面是button组件,把lib重命名为src。lib中的button.js重命名为button.vue,并且更改内容

<template>
  <button>按钮</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "LkButton",
  setup() {},
});
</script>

image.png 创建index.ts在button组件根目录，此文件为button的入口文件，或者叫导出的文件,实现一个install方法，会在Vue.use时执行该方法，并且把该Vue实例当参数传入，install里直接component方法注册为全局组件，就可以在项目里使用该组件了

import Button from './src/button.vue';
import { App } from 'vue'

Button.install = (app: App) => {
    app.component(Button.name, Button)
}


export default Button;

安装vue@next(vue最新的版本)和typescript, -W表示在根目录安装，供所有包使用

yarn add vue@next typescript -W

利用命令初始化tsconfig文件

tsc --init

修改ts配置，打包目标为最新的语法，模块转化后为最新语法，支持模块转化，跳过类库检测，强制区分大小写，模块解析方式为node,jsx不转化，生成声明文件，生成映射文件方便查错

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "jsx": "preserve",
    "declaration": true,
    "sourceMap": true
  }
}

创建.vue后缀的文件的声明文件，根目录下typings/vue-shim.d.ts,声明了.vue后缀的模块的导出类型为defineComponent类型的返回值的类型其实就是vue组件的类型，

declare module "*.vue" {
    import { defineComponent, App } from 'vue';
    const component: ReturnType<typeof defineComponent>;
    export default component;
}

按照button的创建方式创建好其他组件，packages目录下就有多个组件了，最后就变成一个组件库了

全局导入入口

在组件库里，创建一个包含所有组件的组件，这个是组件库的集合所有无需修改前缀，这个是代表完整的组件库，直接一路回车，然后删除lib目录和测试相关的目录

lerna craete xx-ui

创建入库文件index.ts,里面导入组件库中所有其他组件，实现一个install方法，就是forEach编辑所有组件，全部注册为全局组件，组件库的全部导入的意思,

import Button from '@xx-ui/button';
import Icon from '@xx-ui/icon'
import { App } from 'vue';
const components = [
    Button,
    Icon
];
const install = (app: App) => [
    components.forEach(component => {
        app.component(component.name, component);
    })
]

export default { install };

倒入的组件前缀要和自己起的一致，可以查看node_moduels里面生成的包名，有时可能会延迟，可以是尝试yarn，leran会重新组织一下

启动一个vue项目导入组件库，在这个项目里使用组件库

根目录创建一个vue项目，主要是让组件在里面运行 创建目录website,里面创建App.vue(经典的App组件)，main.js程序入口文件 App.vue主要是使用一下button组件

    ...
    <Xx-Button></Xx-Button>
    ...

程序入口文件main.js,创建vue实例，use一下组件库，然后render的html里的id为root的div中。 创建tmplate.html模版里面有一个div id为root, 安装webapck本地启动服务的依赖,和各种loader和plugins,

 yarn add webpack webpack-cli webpack-dev-server vue-loader@next @vue/compiler-sfc -D -W
yarn add babel-loader @babel/core @babel/preset-env @babel/preset-typescript babel-plugin-module-resolver url-loader file-loader html-webpack-plugin css-loader sass-loader style-loader sass -D -W

配置babel.config.js,和webpack.config.js,使它不报错，然后本地启动webpack server.就可以实时预览组件，并开发。

avatar
文章
阅读
粉丝