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