codemao-ui

编程猫UI

1、初始化 package.json：npm init（"license": "ISC" —> 改成'MIT'） 2、初始化 tsconfig.json：npx tsc --init（安装typescript：pnpm i -D typescript） 3、安装react：pnpm i react react-dom 和 pnpm i -D @types/react @types/react-dom

rollup

4、安装rollup和其相关插件：pnpm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript rollup-plugin-dts tslib 5、配置rollup.config.mjs 和 package.json ( 报错： 1、textEncoder ??= new TextEncoder();是因为node版本低于15导致 2、SyntaxError: Cannot use import statement outside a module )

6、创建.npmrc文件，npm包发布（npm publish）

7、安装css样式：pnpm i -D postcss rollup-plugin-postcss postcss-import autoprefixer

8、安装scss：pnpm i -D sass node-sass sass-loader

9、安装babel：pnpm i -D @rollup/plugin-babel @rollup/plugin-node-resolve @babel/core @babel/preset-env 让 rollup 无缝衔接 babel: @rollup/plugin-babel 让 babel 能够编译 ts 文件（不会进行类型检查）: @babel/preset-typescript

用于解析代码中的外部依赖，添加该插件后默认会将所有依赖打包进 build.js 中: @rollup/plugin-node-resolve 外部依赖的导出大部分是 commonjs 格式，需要先进过该插件的处理: @rollup/plugin-commonjs rollup 默认不会自动判断扩展名，所以需要通过该插件来自动解析扩展名: @rollup/plugin-node-resolve 最小化打包后的代码: @rollup/plugin-terser 将代码转译为 ES6，比如箭头函数变成普通函数: @babel/preset-env

10、识别require：@types/node 压缩：@rollup/plugin-terser