低代码平台-远程组件打包(ESModule)

前言

最近的工作基本上在第三方低代码平台展开,使用过之后才发现低代码其实并不低代码,反而有种束手束脚的别扭感,很多时候业务设计的思路平台无法实现或者实现的体验感不佳。想写低代码文章的目的有两个,一个是熟悉低代码的逻辑和业务,二是想思考什么样的低代码平台才更被人想用。

技术栈

  • vue3 组件的开发语言,同时通过vue3的异步组件defineAsyncComponent来加载远程组件
  • vite 脚手架,用于调试组件
  • webpack 把组件编译打包成esm格式

使用vite初始化工程

yarn create vite 按照提示操作即可。

这一步就不赘述了,可查阅vite官网

webpack配置

安装webpack

依赖之间可能有版本要求,所以一开始最好跟我的版本一致。
yarn add webpack@5.89.0 webpack-cli@5.1.4 -D

vue-loader

使webpack能够编译vue文件
yarn add vue-loader@17.3.1 -D

样式

使webpack能够编译css/less文件
yarn add style-loader@3.3.3 css-loader@6.8.1 less@4.2.0 less-loader@11.1.3 -D

js处理

将es5以上依法转义
yarn add babel-loader@9.1.3 @babel/core@7.23.6 @babel/preset-env@7.23.6 -D

图片处理

yarn add file-loader@6.2.0 -D

完整配置

js 复制代码
import { dirname} from "node:path"
import { fileURLToPath } from "node:url"
import { VueLoaderPlugin } from "vue-loader"
import path from 'path'
// 按需打包element-plus
import AutoImport from 'unplugin-auto-import/webpack'
import Components from 'unplugin-vue-components/webpack'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 需要打包的组件名
const cardName = process.env.npm_config_card
const getCurrentDir = () => {
  const __filename = fileURLToPath(import.meta.url)
  const __dirname = dirname(__filename)
  return __dirname
}
const __dirname = getCurrentDir()

export default {
  mode: "production",
  entry: {
    // 组件代码
    index: path.resolve(__dirname, `../src/cards/${cardName}/index.js`),
    // 组件配置面板代码
    panel: path.resolve(__dirname, `../src/cards/${cardName}/panel/index.js`)
  },
  output: {
    filename: "[name].js",
    path:  path.resolve(__dirname, `./${cardName}`),
    // esm打包模式
    library: { type: 'module' }
  },
  experiments: { outputModule: true },
  plugins: [
    new VueLoaderPlugin(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  externals: {
     // 排除vue
    'vue': 'https://cdn.jsdelivr.net/npm/vue@3.2.37/dist/vue.esm-browser.js'
  },
  optimization: {
    // 压缩代码
    minimize: true,
  },
  module: {
    rules: [
      // vue
      {
        test: /\.vue/,
        use: ["vue-loader"],
      },
      // JS
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              // 开始
              [
                "@babel/preset-env",
                {
                  useBuiltIns: "usage",
                  corejs: {
                    version: 3,
                  }
                },
              ],
              // 结束
            ],
          },
        },
      },
      // CSS
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      // Images
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              outputPath: "assets/images/",
            },
          },
        ],
      },

      // Fonts
      {
        test: /\.(ttf|eot|woff|woff2)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              outputPath: "assets/fonts/",
            },
          },
        ]
      }
    ]
  }
}

打包命令

npm run build --card=组件名

具体文件目录可访问gitee地址

参考文章

疑问

  • 打包组件的时候需要在externals中定义vue的远程地址,能否定义一个相对地址
  • 如何排除elementplus不打包到组件
相关推荐
BPM_宏天低代码13 小时前
低代码 BPA:简化业务流程自动化的新趋势
运维·低代码·自动化
液态不合群4 天前
数智时代:以低代码开发为催化剂 加速中国制造转型升级
低代码·制造
BPM_宏天低代码4 天前
低代码用户中心:简化开发,提升效率的新时代
低代码
小麦项目管理指南4 天前
如何利用低代码开源框架实现高效开发?
大数据·低代码·开源·产品运营·产品经理
工业甲酰苯胺6 天前
加强科技平台企业赋能 加快发展新质生产力
低代码
ZKNOW甄知科技7 天前
低代码架构浅析
程序人生·低代码·架构·it
百数7 天前
百数功能更新——表单提交支持跳转到外部链接并支持传参
java·前端·低代码
BPM_宏天低代码7 天前
低代码信息中心:赋能创新的未来
低代码
canonical-entropy7 天前
Nop平台核心代码阅读导引
低代码·开源·可逆计算·nop平台
HUIBUR科技9 天前
AI驱动的低代码未来:加速应用开发的智能解决方案
低代码