极客观点
项目管理
HarmonyOS
问题：使用vite搭建了一个js库，具体流程参考这篇文章如何封装一个自己的JS/TS库，并发布到NPM
现在遇到一个问题，我封装的一个方法中使用了空值合并运算符，已经配置了babel转译，但是打包后源码中未将es6转为es5。所以导致我在发布该包后，在其他项目中安装依赖，启动项目一直报错。
具体配置如下：
项目结构：
main.js代码：
import * as math from "./math.js";
import * as utils from "./utils.js";
// 计算函数
export const plus = math.plus;
export const dictionaryMatch = utils.dictionaryMatch;math.js代码
export const plus = (num1, num2) => {
let r1, r2, m;
try {
r1 = num1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = num2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
return (num1 * m + num2 * m) / m;
};utils.js代码
export function dictionaryMatch(index, dictionary) {
let label = "";
let value = "";
console.log(11);
dictionary.forEach((item) => {
// ?? 如果左侧是null或者undefined才会继续，如果是0，则取值为0
value = item.value ?? item.dictValue ?? item.id ?? item.type;
if (value === index) {
label = item.label || item.name || item.dictLabel;
}
});
return label;
}
package.json代码
{
"name": "fastcode-test",
"version": "0.0.19",
"type": "module",
"files": [
"dist",
"index.d.ts"
],
"main": "./dist/fastcodeTest.umd.js",
"module": "./dist/fastcodeTest.js",
"types": "./index.d.ts",
"exports": {
"types": "./index.d.ts",
"import": "./dist/fastcodeTest.js",
"require": "./dist/fastcodeTest.umd.cjs"
},
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
"@babel/plugin-proposal-optional-chaining": "^7.21.0",
"@babel/preset-env": "^7.25.3",
"@rollup/plugin-babel": "^6.0.4",
"vite": "^5.2.10"
}
}vite.config.js代码
import { defineConfig } from "vite";
import babel from "@rollup/plugin-babel";
export default defineConfig({
build: {
lib: {
entry: "./lib/main.js",
name: "FastcodeTest",
fileName: (format) => `fastcodeTest.${format}.js`,
formats: ["es", "umd"],
},
},
rollupOptions: {
plugins: [
babel({
babelHelpers: "bundled",
exclude: "node_modules/**",
presets: [
[
"@babel/preset-env",
{
targets: {
browsers: "> 0.25%, not dead", // 设定目标浏览器
},
useBuiltIns: "entry",
corejs: 3,
},
],
],
}),
],
},
});
ps:
功能已经实现，在此进行记录。
原来的需求是：我想搭建一个js库，然后在vue-cli搭建的项目和vite搭建的项目中可以正常使用。
然后搭建js库的时候选择了vite搭建，一直以为vite会根据配置输出esm和cjs两种方式就可以满足需求，但是在实现过程中出现了很多问题；
1、封装的方法使用了es6中的空值合并运算符，想要兼容其他浏览器或者环境，需要将es6转为es5，网上找了很多解决方法都无效（要么是安装很多依赖，要么是添加好多配置），而我代码中的这句是当时复制的，我没有注意到，也对这个不是很了解，感谢@然后去远足 、@陟上晴明 的提醒与帮助。
targets: {
browsers: "> 0.25%, not dead", // 设定目标浏览器
}2、问题1解决之后，打包的js已经成功转译为es5了，我就自信的去发包，然后再其他项目安装依赖，问题出现了，启动项目时，一直提示未安装依赖，然后就不知道问题出在哪里，最后经过AI的回答，得到如下答案：
然后我用rollup试了下，成功解决。
但是这块有个问题，既然vite内部是用rollup构建的，那其实也可以不用安装rollup等，用vite内部的配置应该也可以解决以上问题。
话说题主真的明白这个“设定目标浏览器”指的是什么吗？
按现在的设定，占有率 > 0.25% 且还没停止维护的，Chrome 最低版本都已经是 v109 了。v109 的 Chrome，别说 ES5 了，就是 ES2022 都已经完整支持了……
你要想强制指定成适配某个版本的浏览器，就写成具体版本号，别用这种相对值，这玩意儿每隔几个月都在变 —— 你仔细想象，三年前 >0.25% 的浏览器和三年后的 >0.25% 的浏览器，它肯定不一样啊。
P.S.
如果原题中提到的这几个项目是在同一台电脑上、同一个 Node 环境下，那么我觉得如果报错了其实压根也不是这个的问题……