rollup构建发布npm

前言

本文正在参加「金石计划」 随着Mool3D开源，在使用上我们总不能每次依靠着cv引擎代码封装所需依赖完成自己的业务开发，这样显得十分的繁琐。本文为Mool3D引擎构建发布npm过程。如有需要发布自己的npm库的可以参考本篇文章～

Mool3D

本人开源的基于threejs二次封装的引擎，主要封装了日常常用的模块，以类的形式通过typescript约束提示完成初版引擎的封装。目前有十几种常用的类，初版引擎代码已经开源，可以查看我的首页github上以及主页的引擎文档地址～

npm

首先我们发布一个npm依赖离不开package.json的配置，下面简单介绍一些常用到的配置属性～

{
  "name": "mool3d", //项目名称也就是你要发布的npm库名称
  "version": "1.0.0",//版本号
  "description": "基于threejs二次封装的引擎",//对库的描述
  "type": "",//`Node` 环境中可以使用的模块化方式
  "typings": "",//使用到ts到申明文件
  "main": "",//入口文件
  "scripts": {},//脚本
  "keywords": [],//关键字
  "author": "yangj",//作者
  "license": "ISC",
  "peerDependencies":{}//这里代表的是所依赖的第三方库，不会将其打包进你的依赖，而是在下载会先查看本地中是否有同版本依赖，没有则一同随着包一起安装
}

rollup

这边简单介绍一下rollup的一些优势，rollup使用的是Es6模块不同于传统的CommonJs和AMD，这也是这里为什么选择rollup打包的原因。rollup给自己的定位是将小块代码编译成大块复杂的代码，所以rollup更多适合用于构建依赖，下面介绍简单的rollup配置～

安装依赖

yarn add rollup-plugin-node-resolve --D
yarn add rollup-plugin-commonjs --D
yarn add rollup-plugin-typescript2

rollup.config.js

import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";//识别三放依赖中的require转成es模块
import ts from "rollup-plugin-typescript2";//识别ts

export default {
  input: "./src/Threejs/index.ts", // 入口文件
  output: {
    file: "./lib/index.js", // 出口文件
    name: "index", // 出口文件
    format: "es", // 输出的模块语法格式,es6模块
  },
  plugins: [ts(), resolve(), commonjs()],
  external: ["three", "axios", "@types/three"],//配置第三方依赖不打包入打包文件，与上方在npm下载时作为第三方依赖下载
};

配置tsconfig.json

这里配置主要是配置一些要识别的ts文件及第三方依赖ts库，主要是declaration

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/Threejs/plugins/lights/rectlib.js"
  ],
  "typeRoots": ["node_modules/@types"],
  "compilerOptions": {
    "types": ["three"],
    "lib": ["ES2016", "DOM"],
    "declaration": true,//是否生成相应的 .d.ts 声明文件，默认：false
    "declarationDir": "./lib" //生成.d.ts文件的目录
  }
}

发布npm

发布npm就比较简单了，首先看看有没有重名的。如果没有重名的配置好package.json通过npm publish即可完成发布。

npm login //登陆npm账号
npm init -y //初始化
touch README.md 
npm publish

结语

本文为本人开源的基于threejs二次封装的引擎Mool3D引擎构建发布npm过程。对Mool3D感兴趣的可以看我之前相关文章，并可以通过yarn add mool3d下载使用～