Giter VIP home page Giter VIP logo

h-plus's Introduction

react-restady

目录结构

目录结构

  • dist:负责打包的文件夹,gulp编译ts,打包样式,打包单文件组件
  • build:最终生成的打包结果
  • packages: 组件代码
  • example: 测试组件
  • typing: 类型声明
  • .npmrc: 增加此文件安装依赖才会正常
  • tsconfig: ts配置文件
  • pnpm-workspace.yaml: monorepo工作空间

packages包目录结构

目录结构图

  • components:组件包,最终通过index.ts 导出所有组件
  • theme-chalk:样式包,BEM规范,(后续设计规范)
  • utils: 工具类,工具方法

技术栈

  • vue3
  • vite
  • typescript
  • ts-node
  • gulp

资源

  • iconfonts

结果

  • 持import, require()
  • 最终发布dist

组件库整合入口

packages/h-plus

1、组件开发阶段

pnpm install vue@latest typescript -D

pnpm install @h-plus/components -w
pnpm install @h-plus/theme-chalk -w
pnpm install @h-plus/utils -w

cd example

pnpm install @vitejs/plugin-vue sass vite @types/node -D

2、打包阶段

pnpm install gulp @types/gulp sucrase -w -D

2.1打包样式

pnpm install gulp-sass @types/gulp-sass @types/sass @types/gulp-autoprefixer gulp-autoprefixer @types/gulp-clean-css gulp-clean-css sass -D -w

⚠️ 打包之后成了js文件, 那么组件在引入的时候就会失去提示, 那么可以使用ts-morph包

3、统一打包入口, 打包所有组件阶段(统一入口h-plus)

安装依赖

pnpm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-typescript2 rollup-plugin-vue -D -w

4、统一打包入口, 打包单个组件阶段(统一入口h-plus)

pnpm install fast-glob -w -D

5、打包js之后代码没有提示

pnpm install ts-morph -w -D

需要安装一个@vue/compiler-sfc来解析vue文件

pnpm install @vue/compiler-sfc -w -D

h-plus's People

Contributors

hhardyy avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.