基于react-native-paper 封装自己的ui组件库+

rollup打包

import babel from "rollup-plugin-babel";
import typescript from "rollup-plugin-typescript2";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import { DEFAULT_EXTENSIONS } from "@babel/core";
import image from "@rollup/plugin-image";
import pkg from "./package.json";

export default [
  {
    input: "./index.tsx",
    output: [
      {
        file: pkg.main,
        format: "cjs",
        exports: "named",
        sourcemap: true,
      },
      {
        file: pkg.module,
        format: "es",
        exports: "named",
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      nodeResolve(),
      typescript(),
      json(),
      commonjs(),
      babel({
        babelrc: false,
        exclude: ["node_modules/**", "example/**"],
        extensions: [...DEFAULT_EXTENSIONS, ".ts", ".tsx"],
        presets: ["@babel/preset-react"],
      }),
    ],
    external: ["react", "react-native"],
  },
];

pacakage json 修改

image.png

tsconfig 修改如下：

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es2017"],
    "moduleResolution": "node",
    "strict": true,
    "target": "esnext",
    "module": "es6",
    "declaration": true,
    "outDir": "./dist",
    "skipLibCheck": true
  },
  "include": ["src"],
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js",
    "dist",
    "example",
    "rollup.config.js"
  ]
}

storybook 配置也非常麻烦，最后storybook效果：
https://archus-components-mobile.vercel.app/

注意发布npm的时候只需要发布打包之后的dist文件夹以及package.json文件即可，可以这样设置：

image.png

或者可以设置 .npmignore

登录：
Use your github-username in the username, use your github-auth_token as your password and you're good to go.

npm login --scope=@thepiquelab --registry=https://npm.pkg.github.com

密码要用github的personal accesstoken