{"_id":"@duyanren/miniapp-ui","_rev":"12-cf5bba427368e2afcd105f87121655c6","name":"@duyanren/miniapp-ui","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@duyanren/miniapp-ui","version":"0.1.0","keywords":["taro"],"author":{"name":"duyanren"},"_id":"@duyanren/miniapp-ui@0.1.0","maintainers":[{"name":"duyanren","email":"13262792365@163.com"}],"dist":{"shasum":"778ccc00f43c08f3b802f2a77068260cae5a16f3","tarball":"https://registry.npmjs.org/@duyanren/miniapp-ui/-/miniapp-ui-0.1.0.tgz","fileCount":15,"integrity":"sha512-Zz6Zyc4m7qZ5lMByqR0vqDokh2SQefmBhu7xgvtLSxVtO8IVdTw0JUhzfqc9hi/Mh98m56tDvh92lms5urGAGg==","signatures":[{"sig":"MEYCIQCt5qb8mKMyxMAVcyhBbew8KkuxH8lun4M2hEuoXwnxPQIhAICkTYTYyOG0vMIY0V6tpEvC1AotWuJPXe/Jm74U/qRS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30680},"main":"dist/index.js","_from":"file:duyanren-miniapp-ui-0.1.0.tgz","types":"types/index.d.ts","module":"dist/index.esm.js","source":"src/index.ts","browser":"dist/index.umd.js","main:h5":"dist/index.esm.js","private":false,"scripts":{"build":"npm run clean && npm run build:rollup && npm run build:lib","clean":"rimraf lib dists","dev:lib":"tsc --project ./tsconfig.build.json --watch --incremental","build:lib":"tsc --project ./tsconfig.build.json --declaration","dev:rollup":"rollup --config ./rollup.config.js -w","build:rollup":"rollup --config ./rollup.config.js"},"_npmUser":{"name":"duyanren","email":"13262792365@163.com"},"_resolved":"/private/var/folders/mb/tpc535xd69gd_kyzl2kfd8xw0000gn/T/f66581675ee75bde4d8740de1df5b440/duyanren-miniapp-ui-0.1.0.tgz","_integrity":"sha512-Zz6Zyc4m7qZ5lMByqR0vqDokh2SQefmBhu7xgvtLSxVtO8IVdTw0JUhzfqc9hi/Mh98m56tDvh92lms5urGAGg==","_npmVersion":"8.19.2","description":"小程序组件库","directories":{},"_nodeVersion":"16.18.1","browserslist":["last 3 versions","Android >= 4.1","ios >= 8"],"dependencies":{"react":"17.0.0","react-dom":"17.0.0","@tarojs/taro":"3.5.6","@tarojs/react":"3.5.6","@babel/runtime":"^7.7.7","@tarojs/helper":"3.5.6","@tarojs/router":"3.5.6","@tarojs/shared":"3.5.6","@tarojs/runtime":"3.5.6","@tarojs/taro-h5":"3.5.6","@tarojs/components":"3.5.6","@tarojs/plugin-platform-jd":"3.5.6","@tarojs/plugin-platform-qq":"3.5.6","@tarojs/plugin-platform-tt":"3.5.6","@tarojs/plugin-platform-swan":"3.5.6","@tarojs/plugin-platform-weapp":"3.5.6","@tarojs/plugin-framework-react":"3.5.6","@tarojs/plugin-platform-alipay":"3.5.6"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.com/"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^8.0.3","tslib":"^2.6.2","cz-git":"^1.7.1","eslint":"^8.12.0","rimraf":"^3.0.2","rollup":"^2.56.3","webpack":"4.46.0","prettier":"^3.0.3","stylelint":"^14.4.0","commitizen":"^4.3.0","typescript":"^4.1.0","@babel/core":"^7.8.0","@tarojs/cli":"3.5.6","@types/node":"^20.5.9","lint-staged":"^14.0.1","postcss-url":"^10.1.3","@types/react":"^18.0.0","react-refresh":"^0.11.0","postcss-import":"^15.1.0","@changesets/cli":"^2.26.2","@commitlint/cli":"^17.7.1","babel-preset-taro":"3.5.6","@types/webpack-env":"^1.13.6","eslint-config-taro":"3.5.6","rollup-plugin-copy":"^3.4.0","@rollup/plugin-json":"^4.1.0","@tarojs/mini-runner":"3.5.6","eslint-plugin-react":"^7.8.2","rollup-plugin-babel":"^4.4.0","rollup-plugin-clear":"^2.0.7","@rollup/plugin-alias":"^5.0.0","@rollup/plugin-image":"^3.0.2","eslint-plugin-import":"^2.12.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@tarojs/webpack-runner":"3.5.6","eslint-config-prettier":"^9.0.0","eslint-plugin-prettier":"^5.0.0","rollup-plugin-css-only":"^3.1.0","@rollup/plugin-commonjs":"^20.0.0","@typescript-eslint/parser":"^5.20.0","eslint-plugin-react-hooks":"^4.2.0","rollup-plugin-typescript2":"^0.30.0","@rollup/plugin-node-resolve":"^13.0.4","typescript-plugin-css-modules":"^5.0.1","@commitlint/config-conventional":"^17.7.0","@typescript-eslint/eslint-plugin":"^5.20.0","@pmmmwh/react-refresh-webpack-plugin":"^0.5.5"},"peerDependencies":{"react":"17.0.0","react-dom":"17.0.0","@tarojs/taro":"3.5.6","@tarojs/react":"3.5.6","@babel/runtime":"^7.7.7","@tarojs/runtime":"3.5.6","@tarojs/components":"3.5.6"},"_npmOperationalInternal":{"tmp":"tmp/miniapp-ui_0.1.0_1696649266928_0.5333083542584895","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@duyanren/miniapp-ui","version":"0.1.1","keywords":["taro"],"author":{"name":"duyanren"},"_id":"@duyanren/miniapp-ui@0.1.1","maintainers":[{"name":"duyanren","email":"13262792365@163.com"}],"dist":{"shasum":"80103f09be0df01262c2029b34d49a9962b60d82","tarball":"https://registry.npmjs.org/@duyanren/miniapp-ui/-/miniapp-ui-0.1.1.tgz","fileCount":27,"integrity":"sha512-Eb1ntIxlArG2sjr9IDJEtNLrEsznLkp+3REZr4W9WjfmqAYT958scA/8/BXYrv9yzx6U5TqozRYJh+tsUKwx8A==","signatures":[{"sig":"MEQCIBlf7eM25zmQdL1UsQQTf2fQPX0utrA2aazZt+oWrIrsAiAhWkO8hAnN+DO0V+TW7ip3HDTwnW6DYWnlxkwPN1xt2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52036},"main":"dist/index.js","_from":"file:duyanren-miniapp-ui-0.1.1.tgz","types":"types/index.d.ts","module":"dist/index.esm.js","source":"src/index.ts","private":false,"scripts":{"build":"npm run clean && npm run build:rollup && npm run build:lib","clean":"rimraf lib dists","dev:lib":"tsc --project ./tsconfig.build.json --watch --incremental","build:lib":"tsc --project ./tsconfig.build.json --declaration","dev:rollup":"rollup --config ./rollup.config.js -w","build:rollup":"rollup --config ./rollup.config.js"},"_npmUser":{"name":"duyanren","email":"13262792365@163.com"},"_resolved":"/private/var/folders/mb/tpc535xd69gd_kyzl2kfd8xw0000gn/T/b394d68c38ceedbd08b5db42b641268b/duyanren-miniapp-ui-0.1.1.tgz","_integrity":"sha512-Eb1ntIxlArG2sjr9IDJEtNLrEsznLkp+3REZr4W9WjfmqAYT958scA/8/BXYrv9yzx6U5TqozRYJh+tsUKwx8A==","_npmVersion":"8.19.2","description":"小程序组件库","directories":{},"sideEffects":["*.scss","*.css"],"_nodeVersion":"16.18.1","browserslist":["last 3 versions","Android >= 4.1","ios >= 8"],"dependencies":{"react":"17.0.2","react-dom":"17.0.2","@tarojs/taro":"3.5.6","@tarojs/react":"3.5.6","@babel/runtime":"^7.7.7","@tarojs/helper":"3.5.6","@tarojs/router":"3.5.6","@tarojs/shared":"3.5.6","@tarojs/runtime":"3.5.6","@tarojs/taro-h5":"3.5.6","@tarojs/components":"3.5.6","@tarojs/plugin-platform-jd":"3.5.6","@tarojs/plugin-platform-qq":"3.5.6","@tarojs/plugin-platform-tt":"3.5.6","@tarojs/plugin-platform-swan":"3.5.6","@tarojs/plugin-platform-weapp":"3.5.6","@tarojs/plugin-framework-react":"3.5.6","@tarojs/plugin-platform-alipay":"3.5.6"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.com/"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^8.0.3","tslib":"^2.6.2","cz-git":"^1.7.1","eslint":"^8.12.0","rimraf":"^3.0.2","rollup":"^2.56.3","webpack":"4.46.0","prettier":"^3.0.3","stylelint":"^14.4.0","commitizen":"^4.3.0","typescript":"^4.1.0","@babel/core":"^7.8.0","@tarojs/cli":"3.5.6","@types/node":"^20.5.9","lint-staged":"^14.0.1","postcss-url":"^10.1.3","@types/react":"^18.0.0","react-refresh":"^0.11.0","postcss-import":"^15.1.0","@changesets/cli":"^2.26.2","@commitlint/cli":"^17.7.1","babel-preset-taro":"3.5.6","@types/webpack-env":"^1.13.6","eslint-config-taro":"3.5.6","rollup-plugin-copy":"^3.4.0","@rollup/plugin-json":"^4.1.0","@tarojs/mini-runner":"3.5.6","eslint-plugin-react":"^7.8.2","rollup-plugin-babel":"^4.4.0","rollup-plugin-clear":"^2.0.7","@rollup/plugin-alias":"^5.0.0","@rollup/plugin-image":"^3.0.2","eslint-plugin-import":"^2.12.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@tarojs/webpack-runner":"3.5.6","eslint-config-prettier":"^9.0.0","eslint-plugin-prettier":"^5.0.0","rollup-plugin-css-only":"^3.1.0","@rollup/plugin-commonjs":"^20.0.0","@typescript-eslint/parser":"^5.20.0","eslint-plugin-react-hooks":"^4.2.0","rollup-plugin-typescript2":"^0.30.0","@rollup/plugin-node-resolve":"^13.0.4","typescript-plugin-css-modules":"^5.0.1","@commitlint/config-conventional":"^17.7.0","@typescript-eslint/eslint-plugin":"^5.20.0","@pmmmwh/react-refresh-webpack-plugin":"^0.5.5"},"peerDependencies":{"react":"17.0.2","react-dom":"17.0.2","@tarojs/taro":"3.5.6","@tarojs/react":"3.5.6","@babel/runtime":"^7.7.7","@tarojs/runtime":"3.5.6","@tarojs/components":"3.5.6"},"_npmOperationalInternal":{"tmp":"tmp/miniapp-ui_0.1.1_1734681075298_0.1973772390853814","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@duyanren/miniapp-ui","version":"0.1.2","private":false,"description":"小程序组件库","module":"dist/index.esm.js","main":"dist/index.js","source":"src/index.ts","sideEffects":["*.scss","*.css"],"types":"lib/index.d.ts","publishConfig":{"access":"public","registry":"https://registry.npmjs.com/"},"browserslist":["last 3 versions","Android >= 4.1","ios >= 8"],"author":{"name":"duyanren"},"keywords":["taro"],"peerDependencies":{"@babel/runtime":"^7.7.7","@tarojs/components":"3.5.6","@tarojs/react":"3.5.6","@tarojs/runtime":"3.5.6","@tarojs/taro":"3.5.6","react":"17.0.2","react-dom":"17.0.2"},"dependencies":{"@babel/runtime":"^7.7.7","@tarojs/components":"3.5.6","@tarojs/helper":"3.5.6","@tarojs/plugin-framework-react":"3.5.6","@tarojs/plugin-platform-alipay":"3.5.6","@tarojs/plugin-platform-jd":"3.5.6","@tarojs/plugin-platform-qq":"3.5.6","@tarojs/plugin-platform-swan":"3.5.6","@tarojs/plugin-platform-tt":"3.5.6","@tarojs/plugin-platform-weapp":"3.5.6","@tarojs/react":"3.5.6","@tarojs/router":"3.5.6","@tarojs/runtime":"3.5.6","@tarojs/shared":"3.5.6","@tarojs/taro":"3.5.6","@tarojs/taro-h5":"3.5.6","classnames":"^2.5.1","react":"17.0.2","react-dom":"17.0.2","@duyanren/miniapp-common":"0.1.4"},"devDependencies":{"@babel/core":"^7.8.0","@changesets/cli":"^2.26.2","@commitlint/cli":"^17.7.1","@commitlint/config-conventional":"^17.7.0","@pmmmwh/react-refresh-webpack-plugin":"^0.5.5","@rollup/plugin-alias":"^5.0.0","@rollup/plugin-commonjs":"^20.0.0","@rollup/plugin-image":"^3.0.2","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@tarojs/cli":"3.5.6","@tarojs/mini-runner":"3.5.6","@tarojs/webpack-runner":"3.5.6","@types/node":"^20.5.9","@types/react":"^18.0.0","@types/webpack-env":"^1.13.6","@typescript-eslint/eslint-plugin":"^5.20.0","@typescript-eslint/parser":"^5.20.0","babel-preset-taro":"3.5.6","commitizen":"^4.3.0","cz-git":"^1.7.1","eslint":"^8.12.0","eslint-config-prettier":"^9.0.0","eslint-config-taro":"3.5.6","eslint-plugin-import":"^2.12.0","eslint-plugin-prettier":"^5.0.0","eslint-plugin-react":"^7.8.2","eslint-plugin-react-hooks":"^4.2.0","husky":"^8.0.3","lint-staged":"^14.0.1","postcss-import":"^15.1.0","postcss-url":"^10.1.3","prettier":"^3.0.3","react-refresh":"^0.11.0","rimraf":"^3.0.2","rollup":"^2.56.3","rollup-plugin-babel":"^4.4.0","rollup-plugin-clear":"^2.0.7","rollup-plugin-copy":"^3.4.0","rollup-plugin-css-only":"^3.1.0","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.31.0","stylelint":"^14.4.0","tslib":"^2.6.2","typescript":"^4.1.0","typescript-plugin-css-modules":"^5.0.1","webpack":"4.46.0"},"scripts":{"dev:lib":"tsc --project ./tsconfig.build.json --watch --incremental","dev:rollup":"rollup --config ./rollup.config.js -w","build":"pnpm run clean && pnpm run build:rollup && pnpm run build:lib","build:lib":"tsc --project ./tsconfig.build.json --declaration","build:rollup":"rollup --config ./rollup.config.js","clean":"rimraf lib dists"},"_id":"@duyanren/miniapp-ui@0.1.2","_integrity":"sha512-hlcCRcpgQjVYhflLCBwDjDEo7zETHY/vl88F5PmnEht0/rpH3XcJHGkgm8FFZAXX9CZo181uPVcavwH9ad3hXQ==","_resolved":"/private/var/folders/mb/tpc535xd69gd_kyzl2kfd8xw0000gn/T/36c813d1ba96c36ac9c14a2d86fa1ee5/duyanren-miniapp-ui-0.1.2.tgz","_from":"file:duyanren-miniapp-ui-0.1.2.tgz","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-hlcCRcpgQjVYhflLCBwDjDEo7zETHY/vl88F5PmnEht0/rpH3XcJHGkgm8FFZAXX9CZo181uPVcavwH9ad3hXQ==","shasum":"acca83733fe37bee40616d7baa7c7422fe5236b3","tarball":"https://registry.npmjs.org/@duyanren/miniapp-ui/-/miniapp-ui-0.1.2.tgz","fileCount":30,"unpackedSize":111823,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDElwjfbkambfAKotyD8l8oN/wffEdmZPNgq4X5lbE7/wIhAIqQ0ssZRGAVE8tRkojLuOg/MTwVrdj48nh326vYLr8X"}]},"_npmUser":{"name":"duyanren","email":"13262792365@163.com"},"directories":{},"maintainers":[{"name":"duyanren","email":"13262792365@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/miniapp-ui_0.1.2_1737084667161_0.9947607359637747"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-07T03:27:46.846Z","modified":"2025-01-17T03:31:07.538Z","0.0.2":"2023-10-03T02:10:57.938Z","0.0.1":"2023-10-03T02:16:46.888Z","0.0.3":"2023-10-03T06:30:11.484Z","2.0.0":"2023-10-07T02:26:05.339Z","0.0.4":"2023-10-07T03:24:31.944Z","0.1.0":"2023-10-07T03:27:47.195Z","0.1.1":"2024-12-20T07:51:15.477Z","0.1.2":"2025-01-17T03:31:07.343Z"},"author":{"name":"duyanren"},"keywords":["taro"],"description":"小程序组件库","maintainers":[{"name":"duyanren","email":"13262792365@163.com"}],"readme":"# 使用\n\n```javascript\n// 安装npm包\nyarn install @duyanren/miniapp-ui\nor npm i @duyanren/miniapp-ui\n// 引入完整样式文件\nimport '@duyanren/miniapp-ui/dist/style/components/index.scss';\n\n// 按需加载样式\n1. yarn add babel-plugin-import\n2. 在babel.config.js中配置\n\n[\n  'import',\n      {\n        libraryName: '@duyanren/miniapp-ui',\n        camel2DashComponentName: false,\n        customName: name => {\n          return `@duyanren/miniapp-ui/lib/components/${name}`;\n        },\n        customStyleName: name =>\n          `@duyanren/miniapp-ui/dist/style/components/${name}.scss`,\n      },\n      '@duyanren/miniapp-ui',\n]\n\n\n\n// 本地调试npm包\n\n1. miniapp-ui目录下 pnpm link --global\n2. 切换到业务项目目录下 pnpm link --global @duyanren/miniapp-ui\n3. npm run dev:rollup\n\n\n```\n\n## 组件按需引用两种方式\n\n- 经典方法：组件单独分包 + 按需导入 + babel-plugin-import（自动化按需引入）\n\n```javascript\nimport Button from 'xxx-ui/packages/button';\nimport 'xxx-ui/theme-chalk/button.css';\n\nVue.use(Button);\n```\n\n这样我们就只引入了Button相关的文件，而不会包含其他组件。这样的问题是比较麻烦，使用成本较高，使用者需要知道组件库的一些路径等。最理想的方式还是下面这种：\n\n```javascript\nimport { Button } from 'xxx-ui';\n```\n\n既然想通过以上这种简单的方式引入组件和相关的样式文件等文件，那么我们只要帮使用者把第一种方式转换成第二种就可以了。而通过babel插件来转换对用户来说是无感的。主流组件库也是这样实现的，比如Element UI使用的是babel-plugin-component插件。大致思路就是这样，如果需要实现这种方式的按需引入，则需要为自己的组件库开发一个类似的babel插件，通过AST抽象语法树进行一个转换。具体实现可参考babel-plugin-import源码。\n\nAnt Design也是采用这种方式，只是使用的插件不一样。它用的是babel-plugin-import，其实babel-plugin-component就是fork自babel-plugin-import的。\n\n- 次时代方法：ESModule + Treeshaking + 自动按需import\n\n1. 组件库应打包为 es module 模块\n\ncommonjs规范是最常见的使用方式，umd一般用于CDN方式直接在页面引入，而es module就是用来实现Tree Shaking的，为什么es module能实现Tree Shaking而commonjs规范不行呢，原因是es module是静态编译的，也就是在编译阶段就能确定某个模块导出了什么，引入了什么，代码执行阶段不会改变，所以打包工具在打包的时候就能分析出哪个方法被使用了，哪些没有，没有用到的就可以放心的删掉了。\n\n此外，需要在组件库的package.json文件中的\"module\"属性指定包的es module模块入口，会优先于\"main\"属性生效。\n\n2. 组件库应按规范导出各组件\n\n接下来我们还要修改一下组件库中各组件的导出方法，不独立分包，所有组件暴露在一个入口文件中。这样才能支持以下这种使用方式：\n\n```javascript\nimport { Button } from 'xxx-ui';\n```\n\n我们需要保证最终在入口文件（如index.js）中导出各具名组件，如：\n\n```javascript\n// 可以在入口文件引入全局样式文件，同时配置 sideEffects 以保证 tree-shaking 不会把样式文件移除\n// import './style.css';\n// 如果没有配置 sideEffects 在主项目中使用组件库时还需要手动引入打包产物中的样式文件\n// ...\n\nimport XButton from '@/components/button';\nimport XInput from '@/components/input';\nimport XDialog from '@/components/dialog';\n// ...\n\nexport {\n  XButton,\n  XInput,\n  XDialog,\n  // ...\n};\n```\n","readmeFilename":"README.md"}