背景
:开发一个大屏项目中,需要是要
DataV
的那边边框,装饰等,只是DataV是基于vue2的,
vue3
版的作者还在开发中,于是翻了
DataV
的源码,发现使用
esm
方式时是直接引入源码而不经过打包,其源码中使用的
vue
语法
vue3
也支持,所以可以直接在
vue3
中引入使用.
npm install @jiaminghi/data-view
import dataV from "@jiaminghi/data-view";
app.use(dataV)
- template v-for 绑定key
解决方式: 使用patch-package给源码打补丁
- 报错
Uncaught SyntaxError: The requested module '/node_modules/@jiaminghi/c-render/lib/index.js?v=c576b840' does not provide an export named 'default'
这是因为vite开发时会对依赖进行预构建,由于dataV源码中引入了其他commonjs包,而vite没有将这些依赖预构建转成esm,所以需要在vite.config.js中配置告知vite哪些依赖需要转成esm格式,配置在optimizeDeps.include,就可以愉快使用了.
配置如下:
export default defineConfig({
optimizeDeps: {
include: [
"@jiaminghi/c-render",
"@jiaminghi/c-render/lib/plugin/util",
"@jiaminghi/charts/lib/util/index",
"@jiaminghi/charts/lib/util",
"@jiaminghi/charts/lib/extend/index",
"@jiaminghi/charts",
"@jiaminghi/color",
build: {
commonjsOptions: {
include: [
/node_modules/,
});
- 增加打包入口文件
源码构建源码
增加入口文件:
- 打包过程中发现缺少
rollup和less,需要安装,为了同时打包vue2和vue3的格式,需要编译vue文件,vue2需要vue-template-compiler,vue3需要@vue/compiler-sfc,对应的rollup-plugin-vue版本是@6和@5.1.6
- 修改了rollup.config.js配置的插件顺序,否则打包不了
import resolve from "rollup-plugin-node-resolve";
import vue from "rollup-plugin-vue";
import commonjs from "rollup-plugin-commonjs";
import babel from "rollup-plugin-babel";
import postcss from "rollup-plugin-postcss";
import vue2 from "rollup-plugin-vue2";
const bundleFormats = ["umd", "esm", "cjs", "iife"];
const vueVersions = ["vue2", "vue3"];
const isVue3 = (v) => v == "vue3";
const isUmd = (v) => v == "umd";
const isCjs = (v) => v == "cjs";
const isIife = (v) => v == "iife";
const getRollupConfig = (bundleFormat, vueVersion = "vue2") => {
const vuePlugin = isVue3(vueVersion) ? vue : vue2;
return {
input: `build/${isVue3(vueVersion) ? "vue3-entry/" : ""}entry.${bundleFormat}.js`,
output: {
format: bundleFormat,
file: `dist/${isVue3(vueVersion) ? "vue3/" : ""}datav.map.vue.${isUmd(bundleFormat) ? "" : bundleFormat + "."}js`,
name: "datav",
...(isUmd(bundleFormat) || isIife(bundleFormat)
globals: {
vue: "Vue",
: {}),
...(isCjs(bundleFormat) ? { exports: "named" } : {}),
...(isUmd(bundleFormat) && isVue3(vueVersion) ? { exports: "default" } : {}),
plugins: [
vuePlugin({
preprocessStyles: true,
}),
resolve(),
babel({
exclude: "node_modules/**",
}),
commonjs(),
postcss(),
external: ["vue"],
const configs = [];
bundleFormats.forEach((format) => {
vueVersions.forEach((vueVersion) => {
const config = getRollupConfig(format, vueVersion);
configs.push(config);
});
});
export default configs;
- 发布npm包
修改包名为@iamzzg/data-view
npm login
npm publish --access=public
datav 打包成 vue3 的版本在 dist/vue3 文件夹下
umd 使用方式
未托管到 cdn,可以直接复制dist/vue3/datav.map.vue.js
<script src="dist/vue3/datav.map.vue.js"></script>
<script>
app.use(datav);
</script>
esm 使用方式
安装
npm i @iamzzg/data-view
import datav from "@iamzzg/data-view/dist/vue3/datav.map.vue.esm";
app.use(datav);
按需导入,和 vue2 方式一致
import { borderBox1 } from "@iamzzg/data-view/dist/vue3/datav.map.vue.esm";
app.use(borderBox1);
背景:开发一个大屏项目中,需要是要DataV的那边边框,装饰等,只是DataV是基于vue2的,vue3版的作者还在开发中,于是翻了DataV的源码,发现使用esm方式时是直接引入源码而不经过打包,其源码中使用的vue语法vue3也支持,所以可以直接在vue3中引入使用.
主要修复：
1.build或者dev项目时不报错，兼容vite2，vue3；
2.加入deep监听watch，直接在父组件中修改图表中的config参数即可完成图表中的数据变更。
yarn npm cnpm pnpm可通用的，就是底层node_modules位置不一样而已，不过修改原理都是一样的，大家可以自行下载研究，目前仅在windows下测试，macos跟linux还未测试。
下面说下安装步骤：
1.在项目更目录中安装，执行pnpm install @jiaminghi/data-view即可；
2.将other_modules压缩包解压并覆盖到项目的node_modules文件夹下即可
调用方法，请参考官网文档http://datav.jiaminghi.com/
基于Vite2编译Vue3项目,在开发时报错：
Uncaught SyntaxError: The requested module '/node_modules/@jiaminghi/c-render/lib/index.js?v=5a66da3e' does not provide an export named 'default'
错误原因是【bn.js】库使用【原生ES6的import】导出是,bs.js库不兼容【因为bn.js是是基于require导出的】为此这里不支持vite编译,只能使用【
Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?v=50ccac76‘ does not provide
EVG 6200NT和EVG 620NT是EV Group（EVG）公司生产的两款光刻机设备。它们在名称上很相似，但是有一些区别。
1. 处理能力：EVG 6200NT相较于EVG 620NT具有更高的处理能力。它具备更大的工作区域和更高的生产吞吐量，适用于大规模生产和处理较大尺寸的衬底。
2. 技术改进：EVG 6200NT可能在技术上进行了一些改进和升级，以提高性能和工艺控制。这些改进可能包括更精确的定位和对准功能、更高的分辨率、更快的加工速度等。
3. 可选配置：EVG 6200NT可能提供更多的可选配置和附加功能，以满足不同客户的需求。这可能包括更多的光刻模式、更多的光源选项、更灵活的工艺设置等。
请注意，以上只是一般情况下EVG 6200NT与EVG 620NT之间可能存在的差异。具体的区别可能因为产品版本、配置选项和客户要求而有所不同。如果您对这两款设备有具体的需求或想了解更详细的差异，请直接与EV Group或其授权经销商联系以获取准确的信息和技术支持。
weixin_Friday:
Vite,Vue3项目引入dataV报错的解决方法
新时代的弩力:
Vite,Vue3项目引入dataV报错的解决方法
m0_56809182:
