alibaba / lowcode-engine

An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系
https://lowcode-engine.cn
MIT License
14.58k stars 2.53k forks source link

基于Webpack5或者Vite搭建是不是不太适用 #272

Open oneQiu opened 2 years ago

oneQiu commented 2 years ago
  1. Vite目前采用的是ESM的模式去开发,但是使用包都是UMD的形式引入的,并不支持,有什么解决办法吗
  2. Webpack5去构建的话也是会出现比较多的问题,感觉就只有Ice1.x版本感觉能流畅使用
github-actions[bot] commented 2 years ago

Hello @oneQiu. We totally like your proposal/feedback, PR wanted。

你好 @oneQiu,我们完全同意你的提议/反馈,欢迎 PR。

oneQiu commented 2 years ago

这是在webpack5的情况下,还不知道如何解决的问题 image image

vite模式目前走不下去

oneQiu commented 2 years ago

image

alvarto commented 2 years ago

vite 模式是解析 dependencies 而不是解析 devDependencies,按照 Demo 来应该不会有影响。

不过源码面板引入的 babel 依赖目前应该不被 vite 支持,可能需要试试 https://www.npmjs.com/package/@baleada/vite-alias-babel-runtime 之类的包?

alvarto commented 2 years ago

Webpack 5 的问题,你指的是按照这个图片配置,依然走不下去吗?

oneQiu commented 2 years ago

我是直接使用了Ice2.0的vite和Vite官方去搭建,都会出现ESM模块的问题,这是VIte官方的。不知道是不是有问题 image image

oneQiu commented 2 years ago

Webpack 5 的问题,你指的是按照这个图片配置,依然走不下去吗?

是的,依然有问题,之前一个ice1.0的旧项目就可以配置成功。但是换到ice2.0的webpack5就不行了,也是babel依赖问题。

alvarto commented 2 years ago

嗯 babel 的依赖我们看看能不能在后续版本迭代用 UMD 的异步 babel-standalone 替代掉。短期内方案还是用 ice 1.x 启动项目吧

oneQiu commented 2 years ago

嗯 babel 的依赖我们看看能不能在后续版本迭代用 UMD 的异步 babel-standalone 替代掉。短期内方案还是用 ice 1.x 启动项目吧

重新尝试了一下,确实是@alilc/lowcode-plugin-code-editor的插件导致的问题,目前不使用这个插件可以在webpack5下成功运行,但是Vite的构建对于依然困难, image 关闭所有插件依然会有问题。可能这就是ESM下的情况吧 image

smat0096 commented 2 years ago

ice2.x webpack5 下的@alilc/lowcode-plugin-code-editor的插件报错, 是 @babel/helper-define-polyfill-provider这个库的package.json的 exports 配置不生效, 调用了node环境的代码导致的 image 这里的node 硬改成browser即可, 应该有更好的修复方式, ice文档里没找到

xmsz commented 2 years ago

我用vite,只想用「@alilc/lowcode-react-renderer」

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['@alilc/lowcode-react-renderer'],
  },
});

会出现

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/index.js?v=ae07ae11' does not provide an export named 'default'

的错误

BingBlog commented 2 years ago

尝试使用webpack5搭建构建环境: https://github.com/BingBlog/lowcode-starter 整体上是可以运行的,prod场景下,一些优化还没加上。

目前的问题是:@alilc/lowcode-plugin-code-editor 这个插件不行。

alvarto commented 2 years ago

@alilc/lowcode-plugin-code-editor 已知依赖了 @babel/core 而间接依赖了 node 包,webpack 5 去掉了 node 包的 polyfill 导致跑不起来。这个月我把 babel core 替换为 babel-standalone,可以再试试。或者大家有空给 code-editor 提个 PR 我也会看的~

尝试使用webpack5搭建构建环境: https://github.com/BingBlog/lowcode-starter 整体上是可以运行的,prod场景下,一些优化还没加上。

目前的问题是:@alilc/lowcode-plugin-code-editor 这个插件不行。

ZhelinCheng commented 2 years ago

我用vite,只想用「@alilc/lowcode-react-renderer」

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['@alilc/lowcode-react-renderer'],
  },
});

会出现

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/index.js?v=ae07ae11' does not provide an export named 'default'

的错误

兄弟你用Vite跑起来了吗,我也只是用@alilc/lowcode-react-renderer

alvarto commented 2 years ago

兄弟你用Vite跑起来了吗,我也只是用@alilc/lowcode-react-renderer

我没有用过 vite,从报错来看,依赖的 prop-types 你可以用 UMD 包然后 external 掉,跳过它的打包问题。@ZhelinCheng

ZhelinCheng commented 2 years ago

@alvarto 现在出现了新的问题,试了一些方式,感觉有些棘手 image

liujuping commented 2 years ago

@ZhelinCheng 上图的这个文件是从在哪个包里面的,以及版本号又是多少。

xmsz commented 2 years ago

我用vite,只想用「@alilc/lowcode-react-renderer」

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['@alilc/lowcode-react-renderer'],
  },
});

会出现

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/index.js?v=ae07ae11' does not provide an export named 'default'

的错误

兄弟你用Vite跑起来了吗,我也只是用@alilc/lowcode-react-renderer

没有 直接放弃了 等大佬们跑通

ZhelinCheng commented 2 years ago

@liujuping 我上传上来了,https://github.com/ZhelinCheng/lowcode-test 主要是根据 @alvarto 的方法,对vite.config.js做了些处理

Dengyy commented 2 years ago

@liujuping 我上传上来了,https://github.com/ZhelinCheng/lowcode-test 主要是根据 @alvarto 的方法,对vite.config.js做了些处理

not work now

Screen Shot 2022-09-21 at 14 08 51
eightHundreds commented 1 year ago

我成功把官方demo改成webpack5了, 考验webpack功底的时候到了

ittat commented 1 year ago

@eightHundreds 大佬能否给个demo,小弟搞到自闭了:(

eightHundreds commented 1 year ago

@eightHundreds 大佬能否给个demo,小弟搞到自闭了:(

这个项目的坑比改webpack5还多,建议放弃。 另外,我该用vite4了,项目比较大,热更太慢了

ittat commented 1 year ago

那可以分享下vite的配置demo吗?我使用vite也会出现一个又一个的莫名报错

arleyGuoLei commented 1 year ago

@alilc/lowcode-plugin-code-editor 已知依赖了 @babel/core 而间接依赖了 node 包,webpack 5 去掉了 node 包的 polyfill 导致跑不起来。这个月我把 babel core 替换为 babel-standalone,可以再试试。或者大家有空给 code-editor 提个 PR 我也会看的~

尝试使用webpack5搭建构建环境: https://github.com/BingBlog/lowcode-starter 整体上是可以运行的,prod场景下,一些优化还没加上。 目前的问题是:@alilc/lowcode-plugin-code-editor 这个插件不行。

大佬,这个有进展吗?目前有个这样的报错 image

PineSongCN commented 1 year ago

@eightHundreds 大佬能否给个demo,小弟搞到自闭了:(

这个项目的坑比改webpack5还多,建议放弃。 另外,我该用vite4了,项目比较大,热更太慢了 大佬带一带,方便出一个vite的demo吗?