zane-ui v0.1.4

学习进度 12-02 06:28

1.创建项目 npx i create-react-app xx --template typescript

2.目录结构

3.styles 公共样式抽离

3.1 _variable.scss 中性色，系列色，字体，字体大小 等等 样式变量

3.2 normalize.css 重置浏览器默认样式

jest 通用测试工具

运行指令 npx jest jest.test.js

ceact-react-app 内置jest

一直运行指令 npx jest jest.test.js --watch

react测试工具

@testing-library/react 详情参考App.test.tsx 文件 运行：npm run test

模块打包成NPM包步骤

1.在根文件 index.tsx中，导出所有的组件实例

2.驯服tsx 将tsx转化成 --- tsconfig.build.json ---> es6 module .jsx

    > 编写tsconfig.build.json文件
    > 添加打包tsx转化命令 
    ```
    //package.json
    build-ts":"tsc -p tsconfig.build.json", 
    ```
    > 执行  npm run build-ts 
    
    ·报错1：Cannot find module '@babel/parser'
    Cannot find module '@babel/types'
    ...等，是因为ts import 文件时，相对路径和【绝对路径】 的查找方式的问题
    【解决】：在tsconfig.build.ts 中添加属性


    ·报错2:allowSyntheticDefaultImports 报错  需要在tsconfig.build.ts 的compilerOptions中引入这个属性


    > 增加对sass文件编译为css --在packmage.json中添加build-css命令

    > 安装依赖 rimraf  可以兼容windows使用rimraf dir 删除命令在打包时删除build文件夹

3.npm link本地测试打包好的组件库npm包

    · 1.在被连接的npm包文件目录下执行  npm link   
    ```
            C:\Users\创\AppData\Roaming\npm\node_modules\zane-ui -> D:\demo\zane-ui
     ```
    · 2.在使用组件库的项目目录下执行 npm link  
           ```
            D:\demo\react-demo\node_modules\zane-ui -> C:\Users\创真\AppData\Roaming\npm\node_modules\zane-ui -> D:\demo\zane-ui PS D:\demo\react-demo>
            ```

    · 3.在组件库文件的package.json 添加 配置   
         ```
            "main": "build/index.js",
            "module": "build/index.js",
            "types": "build.index.d.ts",
         ```
    ·