发布属于自己的NPM—傻瓜式

1、初始化项目
 

yarn init

2、安装打包工具——microbundle

yarn add microbundle

 配置package.json 为打包做准备

{
  "name": "npm", // 项目名称
  "version": "1.0.0", // 项目版本号
  "scripts": {
    "build": "microbundle" // 使用 microbundle 进行打包
  },
  "source": "src/index.ts", // 源代码文件路径
  "module": "dist/index.module.js", // ES Module 格式输出路径
  "unpkg": "dist/index.umd.js", // UMD 格式输出路径
  "license": "MIT", // 项目许可证
  "dependencies": {
    "microbundle": "^0.15.1"
  }
}

3、创建Src目录

并且添加一些语法

const npm: string = "PQJ";

const init = (message: string) => {
  console.log(npm);
};

export { npm, init };

4、使用 microbundle 进行打包

yarn build

在项目的根目录 dist 得到打包后的文件

5、配置 npm 的package.json

在根目录下创建一个名为 npm 文件夹 把打包好的文件丢进去 （看自己需求排除文件），并创建一个 package.json 文件

package.json 配置为 

{
  "name": "PQJ", // NPM 包名称
  "version": "1.0.0", // 版本号
  "description": "彭于晏的工具库", // 包描述
  "type": "module", // 包的模块类型
  "scripts": {}, // 包的脚步
  "main": "index.js", // 包的入口文件
  "keywords": [ // 包的关键词，这些关键词会出现在 npm 网站上
    "PQJ"
  ],
  "author": "PQJ-彭于晏", // 包的作者
  "license": "ISC" // 项目许可证
}

到此就已经完成了，咱们现在在本地来进行测试一下

yarn add ./npm

运行后项目的 dependencies 就会出现 咱们本地的包了

在 src/index.ts 中去验证一下 好不好使 

不仅好使还有类型提示，嘎嘎香

不过 当我们的 文件多起来了之后 就有有问题了

6、microbundle 解决 打包后 .d.ts 文件合并

在 src 文件夹下创建 one.ts 文件

并在 index.ts 文件中引用

这个时候当我们再执行 yarn build 打包的时候  会发现有多个 .d.ts 文件

 这个时候我们就需要使用 微软的 api-extractor 去吧它们合并起来

7、使用 api-extractor 合并 .d.ts 文件

yarn add @microsoft/api-extractor

安装后需要配置它的json 先运行 

yarn api-extractor init

 会在根目录下创建 api-extractor.json 

{
  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",

  "mainEntryPointFilePath": "./dist/index.d.ts", // 主入口文件路径

  "bundledPackages": [],

  "compiler": {
    "overrideTsconfig": {
      "compilerOptions": { "declaration": false }
    }
  },

  "apiReport": {
    "enabled": false
  },

  "docModel": {
    "enabled": false
  },

  "dtsRollup": {
    "enabled": true, // 是否启用 .d.ts 文件的合并
    "untrimmedFilePath": "./npm/index.d.ts", // 合并文件后存放的位置
    "omitTrimmingComments": true // 是否省略注释
  },

  "tsdocMetadata": {
    "enabled": false
  },

  "messages": {
    "compilerMessageReporting": {
      "default": {
        "logLevel": "warning"
      }
    },

    "extractorMessageReporting": {
      "default": {
        "logLevel": "warning"
      }
    },

    "tsdocMessageReporting": {
      "default": {
        "logLevel": "warning"
      }
    }
  }
}

再去配置 package.json 的 指令

    "type:merge": "api-extractor run --local --verbose"

 

最后还要在根目录下创建 tsconfig.json 配置一下 tsconfig.json 文件 

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "declaration": true, // 自动生成声明文件
    "declarationMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

 执行命令 

yarn type:merge

完成  礼毕