使用

JowayYoung2025/5/15大约 2 分钟

引用

@yangzw/bruce-us基于rollup使用CJS/ESM/UMD规范打包，所以可用IIFE、AMD、CJS和ESM四种方式引用。推荐使用IIFE、CJS和ESM三种引用方式，后续所有示例都是基于ESM。

package.json中使用main指定入口文件，所以这些引用方式都是等价。

const { EnvType, TypeOf } = require("@yangzw/bruce-us");
// 或
import { EnvType, TypeOf } from "@yangzw/bruce-us";

// 『以上两段代码』(推荐) 等价 『以下两段代码』

const { EnvType, TypeOf } = require("@yangzw/bruce-us/dist/index");
// 或
import { EnvType, TypeOf } from "@yangzw/bruce-us/dist/index";

关系

Web模块和Node模块包括Common模块全部函数。

web.js包括index.js，web.esm.js包括index.esm.js，web.umd.js包括index.umd.js
node.js包括index.js，node.esm.js包括index.esm.js

如果在Web中使用，请改成这种引用方式。

const { TypeOf, WebType } = require("@yangzw/bruce-us/dist/web");
// 或
import { TypeOf, WebType } from "@yangzw/bruce-us/dist/web";

如果在Node中使用，请改成这种引用方式。

const { NodeType, TypeOf } = require("@yangzw/bruce-us/dist/node");
// 或
import { NodeType, TypeOf } from "@yangzw/bruce-us/dist/node";

IIFE

将node_modules/@yangzw/bruce-us/dist/web.umd.js复制出来，放到创建的js/bruce-us文件夹中，通过HTML的<script>直接引用。这种引用方式适用于结构单一且依赖较少的Web项目。

<body>
	<div>...</div>
	<script src="js/bruce-us/web.umd.js"></script>
	<script>
		console.log(window.BruceUs.TypeOf("bruce"));
		console.log(window.BruceUs.WebType());
	</script>
</body>

AMD

将node_modules/@yangzw/bruce-us/dist/web.umd.js复制出来，放到创建的js/bruce-us文件夹中，要建立在RequireJS中使用。这种引用方式适用于Web项目。

require.config({
	paths: {
		BruceUs: "js/bruce-us/web.umd.js"
	}
});

require(["BruceUs"], function(BruceUs) {
	console.log(BruceUs.TypeOf("bruce"));
	console.log(BruceUs.WebType());
});

CJS

在打包时已经将所有代码处理为ES5，保留exports关键字用于编辑器引用模块时做到智能提示，后续交由webpack打包时会自动将剩余的exports关键字处理掉。这种引用方式适用于Web项目和Node项目。

// Web
const { TypeOf, WebType } = require("@yangzw/bruce-us/dist/web");

console.log(TypeOf("bruce"));
console.log(WebType());

// Node
const { NodeType, TypeOf } = require("@yangzw/bruce-us/dist/node");

console.log(TypeOf("bruce"));
console.log(NodeType());

ESM

在打包时已经将所有代码处理为ES5，保留export关键字用于编辑器引用模块时做到智能提示，后续交由webpack打包时会自动将剩余的export关键字处理掉。这种引用方式适用于Web项目和Node项目。

// Web
import { TypeOf, WebType } from "@yangzw/bruce-us/dist/web";

console.log(TypeOf("bruce"));
console.log(WebType());

// Node
import { NodeType, TypeOf } from "@yangzw/bruce-us/dist/node";

console.log(TypeOf("bruce"));
console.log(NodeType());

打包

@yangzw/bruce-us提供ESM形式的index.esm.js，在package.json中已经配置module字段指向index.esm.js。

{
	"main": "dist/index.js",
	"module": "dist/index.esm.js",
	"browser": "dist/index.umd.js"
}

如果使用webpack打包项目，可以利用Tree Sharking的特性删除未使用的代码，有效减小打包体积。

export default {
	// webpack其它配置
	resolve: {
		mainFields: ["module", "browser", "main"]
	}
};