阿里低代码引擎组件开发环境配置

在利用基于阿里低代码构建项目时候，我们需要开发自己的业务组件，其中很常见的一个需求就是配置环境，但是官方文档也没有提及，接下来演示一个整个业务组件开发过程，针对环境配置提出解决方案。

组件项目初始化

npm init @alilc/element your-material-name

注: your-material-name 是你开发业务组件的项目名

选择组件类型

组件 -> <组件组织方式>

? 请选择引擎生态元素类型 (Use arrow keys)
❯ 组件/物料
  组件设置器（setter）
  设计器插件（plugin）

选择 组件/物料

? 请选择引擎生态元素类型 组件/物料
? 生态元素包名 app
? 简要介绍生态元素 app
? 作者名 mark
? 请选择包模式
  react-单组件
❯ react-组件库
  rax-单组件
  rax-组件库

填写相应信息后选择 react-组件库,之后便生出我们的组件库项目，目录结构如下：

.
├── CHANGELOG.md
├── README.md
├── abc.json
├── build.json
├── build.lowcode.js
├── commitlint.config.js
├── docs
│   ├── colorful-button
│   │   ├── README.json
│   │   ├── README.stories.mdx
│   │   └── demo
│   │       ├── basic.tsx
│   │       └── size.tsx
│   └── colorful-input
│       ├── README.json
│       ├── README.stories.mdx
│       └── demo
│           ├── basic.tsx
│           ├── control.tsx
│           └── size.tsx
├── f2elint.config.js
├── package.json
├── src
│   ├── components
│   │   ├── colorful-button
│   │   │   ├── colorful-button.tsx
│   │   │   ├── index.scss
│   │   │   └── index.tsx
│   │   └── colorful-input
│   │       ├── colorful-input.tsx
│   │       ├── index.scss
│   │       └── index.tsx
│   ├── index.scss
│   ├── index.tsx
│   ├── variables.scss
│   └── variables.tsx
├── tsconfig.json
└── tslint.json

组件开发与调试

# 安装依赖
npm install

# 启动 lowcode 环境进行调试预览
npm run lowcode:dev

# 构建低代码产物
npm run lowcode:build 

通常我们在构建这时候我们就遇到一个需求就是不同环境要调用不同域名，

// package.json
...
 "lowcode:build": "build-scripts build --config ./build.lowcode.js",
...

我们会发现 lowcode:build 使用的是 build-scripts 插件 build-scripts，可以查看相应文档并没有相应的配置项，这时候我们会想用cross-env 进行环境配置，但是使用后你会发现并没有生效。
build-scripts 是基于 "webpack": "^4.46.x" 实现的，理论上可以利用 webpack.DefinePlugin 来实现，这时候通过查看 build-scripts 文档确定对应配置方式，实现如下:

• 1. 配置

lowcode:build:test": "build-scripts build --config ./build.lowcode.js --mode test

多环境类似

• 2. 在 build.lowcode.js 中添加 build.plugin.js 文件路径： 如下：

// build.lowcode.js
module.exports = {
  alias: {
    '@': './src',
  },
  plugins: [
    ...
    "./build.plugin.js" // 新增插件文件路径配置
  ],
};

新增 build.plugin.js 文件

// build.plugin.js
const webpack = require('webpack');

const cdn = process.argv.slice(6)[0] || 'dev';

module.exports = ({ onGetWebpackConfig }) => {
  onGetWebpackConfig((config) => {
    config.plugin('DefinePlugin').use(webpack.DefinePlugin, [
      {
        'process.env.APP_ENV': JSON.stringify(`${cdn}`),
      },
    ]);
  });
};

这样我们在使用地方只需要调用

if (process.env.APP_ENV === 'test') {}

原理也很简单，在webpack打包时候会替换成对应的字符串。

本人利用阿里低代码开发出多个项目，有丰富的组件开发经验和低代码开发经验，有需要的小伙伴可以联系我。