兼容浏览器与nodejs的lib

[isaaxite]

Table Of Contents

• 附录
• 常见问题
• 自动生成types文件

初始结构

├── index.js
├── package.json
└── src
    └── materialPinch.js

使用的是es6+的js语法编写，注意不是ts。

export default {
  type: "object",
  additionalProperties: false,
  properties: {
    bottomEyeHorizontal: commonSchema,
    // ...
  }
};

在浏览器端使用 import引入没有问题，但是在服务端引入会跑错！

服务端当前使用的ts实现，当前的库也是缺少ts支持！

略微梳理一下，接下来的几个小目标：

• 支持浏览器以及服务端引入使用；
• 支持TS

[isaaxite]

支持双端引入使用

使用rollup打包，输出两个模块。

安装 rollup

$ yarn add rollup                            
yarn add v1.22.18
warning ../package.json: No license field
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ rollup@3.3.0
info All dependencies
└─ rollup@3.3.0
Done in 1.14s.

创建配置文件，rollup.config.js，配置文件参考

废弃的配置：

const pkgName = 'index';
// 注意使用 js 文件时使用 module.exports
module.exports = {
  input: 'index.js',
  output: [
    // 服务端使用
    {
      file: `/dist/${pkgName}.cjs.js`,
      format: 'cjs'
    },
    // 浏览器使用
    {
      file: `/dist/${pkgName}.esm.js`,
      format: 'es'
    }
  ]
};

添加开发时与生产时的构建脚本命令

"scripts": {
  "dev": "rollup --environment NODE_ENV:development -c rollup.config.js --watch",
  "build": "rollup --environment NODE_ENV:production -c rollup.config.js"
},

最后使用的配置
并不需要针对浏览器、客户端单独编译一个模块！而是直接使用umd模块编译就行！

const clear = require("rollup-plugin-clear");
const commonjs = require("@rollup/plugin-commonjs");
const nodeResolve = require("@rollup/plugin-node-resolve");
const babel = require('@rollup/plugin-babel');

const PACKAGE_NAME = 'index';
const emEnvType = {
  PRODUCTION: 'production',
  DEVELOPMENT: 'development'
};

const env = process.env.NODE_ENV || emEnvType.PRODUCTION;

const productionOutput = () => ({
  file: `./dist/${PACKAGE_NAME}.umd.js`,
  format: 'umd',
  name: PACKAGE_NAME
});

const developmentOutput = () => ({
  file: `./dist/${PACKAGE_NAME}.umd.js`,
  format: 'umd',
  name: PACKAGE_NAME
});

// config ref: https://www.rollupjs.com/guide/command-line-reference
module.exports = {
  input: 'index.js',
  output: [env === emEnvType.PRODUCTION ? productionOutput() : developmentOutput()],
  plugins: [
    clear({
      targets: ['dist']
    }),
    commonjs(), nodeResolve(),
    babel({ babelHelpers: 'bundled' })
  ]
};

修改packagejson的入口说明

参考：package.json 中 你还不清楚的 browser，module，main 字段优先级

[isaaxite]

附录

参考

• rollup.js 中文文档

[isaaxite]

常见的问题

umd模块，config文件缺少name

[isaaxite]

生成types文件

使用 typescript 的 tsc 命令生成声明文件 （d.ts）

安装 typescript

yarn add typescript --dev

配置 tsconfig.json

{
  // Change this to match your project
  "include": ["index.js"],
  "compilerOptions": {
    // Tells TypeScript to read JS files, as
    // normally they are ignored as source files
    "allowJs": true,
    // Generate d.ts files
    "declaration": true,
    // This compiler run should
    // only output d.ts files
    "emitDeclarationOnly": true,
    // Types should go into this directory.
    // Removing this would place the .d.ts files
    // next to the .js files
    "outDir": "dist/types",
    // go to js file when using IDE functions like
    // "Go to Definition" in VSCode
    "declarationMap": true
  }
}

更新packagejson

描述 types 文件位置

{
  "name": "@tencent/metaverse-ajv-schema",
  "types": "dist/types/index.d.ts",
  "scripts": {
    // ...
    "dts": "tsc"
  },
  "devDependencies": {
    // ...
    "typescript": "^4.8.4"
  }
}

附录

参考

• [Web翻译]从JavaScript生成TypeScript定义文件