低代码平台-远程组件打包(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不打包到组件
相关推荐
百度智能云技术站1 天前
百度智能云千帆大模型平台引领企业创新增长
低代码·llmops·rag·智能体·模型精调
2401_882727572 天前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
_xaboy3 天前
开源动态表单form-create-designer 扩展个性化配置的最佳实践教程
vue.js·低代码·开源·动态表单·表单·formcreate·低代码表单
_xaboy4 天前
在开源的form-create-designer 表单设计器中扩展自定义操作教程
vue.js·低代码·开源·formcreate·可视化表单设计器·fc-designer
by————组态4 天前
Web组态可视化编辑器 快速绘制组态
前端·网络·物联网·低代码·编辑器·组态
低代码布道师5 天前
微搭低代码入门05循环
低代码
小麦项目管理指南5 天前
如何通过低代码逻辑编排实现业务流程自动化?
运维·低代码·自动化·源代码管理
_xaboy5 天前
利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构
vue.js·低代码·开源·动态表单·formcreate·低代码表单·可视化表单设计器
Light606 天前
AI 驱动低代码平台:开创智能化用户体验新纪元
人工智能·低代码