使用npm发布包

1、创建文件

创建目录为wudi-packages的文件夹

2、编写package.json

在wudi-packages的根目录，初始化生成package.json

执行

npm init --yes

3、配置npm上传白名单

配置npm上传的文件白名单，可以指定哪些文件上传哪些不上传，
比如不想直接发布src里的index.js源码，而是发布lib目录下的index.js，按以下配置：
在package.json里，修改main字段的路径指向./lib/index.js（index.js是使用father-build打包后生成的文件）

files字段声明要上传的目录为lib（lib是使用father-build打包后生成的文件夹）

types声明了所有文件和参数的类型（index.d.js是使用father-build打包后生成的文件）

"files": [
  "lib"
],
"main": "./lib/index.js",
"types": "./lib/index.d.ts",

4、father-build配置

在根目录创建.fatherrc.ts文件，写入如下配置（简易版配置）

export default  {
  entry: './src/index.ts',
  cjs: {
    type: 'babel',
    lazy: true
  }
}

5、入口文件

src文件下创建index.ts文件，如下导出了类型FooProps和组件Foo

export type { FooProps } from './Foo';
export { default as Foo } from './Foo';

6、组件源码编写处

在src目录下写要上传的组件的代码，并导出相应的组件或者类型

index.tsx

import type { FC } from 'react';
import './index.less';

export type FooProps = {
  name: string
}

const Foo: FC<FooProps> = ({
  name
}) => {
  console.log('Foo');
  return (
    <div className="foo-box">
      {name}
    </div>
  );
};

export default Foo;

index.less

.foo-box {
  color: red;
}

7、关联github地址

"repository": {
  "type": "git",
  "url": "git://github.com/wo-wudi/wudi-packages.git"
},

在package.json写入repository配置，岂可关联github地址，包发布成功后会有如下图的链接

8、完整的package.json以及项目目录

{
  "name": "wudi-packages",
  "version": "1.0.1",
  "description": "这个是个人测试发布包的例子",
  "files": [
    "lib"
  ],
  "main": "./lib/index.js",
  "types": "./lib/index.d.ts",
  "sideEffects": [
    "*.less"
  ],
  "repository": {
    "type": "git",
    "url": "git://github.com/wo-wudi/wudi-packages.git"
  },
  "scripts": {
    "start": "cross-env PORT=3333 dumi dev",
    "build": "father-build",
    "lint": "npm run lint:script && npm run lint:style",
    "lint:script": "eslint --fix --ext .js,.jsx,.ts,.tsx src",
    "lint:style": "stylelint --fix \"**/*.less\" --custom-syntax postcss-less",
    "remove": "yalc remove -all",
    "sort": "sort-package-json"
  },
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "ahooks": "^3.1.10",
    "antd": "4.19.1",
    "axios": "^0.26.1",
    "classnames": "^2.3.1",
    "lodash": "^4.17.21",
    "normalize.css": "^8.0.1",
    "query-string": "^7.1.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-router-dom": "5.3.0"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "dumi": "^1.1.42",
    "father-build": "^1.21.2",
    "less": "^3.13.1",
    "typescript": "^4.6.3"
  },
  "keywords": [],
  "author": "wudi",
  "license": "ISC"
}

项目目录：

做好如上操作后，使用father-build命令打包，成功后会生成上图中的lib文件夹，这样就可以发布包了。

9、npm发布

在npm官网注册了账号之后

在本地登录（第一次登录后就无需再次登录）

在项目根目录运行

npm publish

10、发布结果

11、包的使用

yarn add wudi-packages

安装包之后

import { Foo } from 'wudi-packages';

<Foo name="测试结果" />

结果：