低代码平台-远程组件打包（ESModule）

前言

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

技术栈

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

使用vite初始化工程

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

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

webpack配置

安装webpack

依赖之间可能有版本要求，所以一开始最好跟我的版本一致。
yarn add [email protected] [email protected] -D

vue-loader

使webpack能够编译vue文件
yarn add [email protected] -D

样式

使webpack能够编译css/less文件
yarn add [email protected] [email protected] [email protected] [email protected] -D

js处理

将es5以上依法转义
yarn add [email protected] @babel/[email protected] @babel/[email protected] -D

图片处理

yarn add [email protected] -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/[email protected]/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不打包到组件