关于amis和amis-editor还有amis-widget-cli的疑问？

[mrluos]

作者你好，关于amis和amis-editor还有amis-widget-cli有几个疑问，麻烦解答一下：
1.amis是不是只是对（json）做解析渲染，没有可视化的能力（就是可视化的制作）
2.如果想要可视化的制作是不是要用amis-editor
3.如果我一个项目(vue技术栈)里面，想要可视化编辑+解析json是不是要同时引入amis+amis-editor （js-sdk方式引入amis, amis-editor是不是只能使用react的技术栈）
4.vue的技术栈，通过amis-widget-cli制作一个vue的自定义组件，如何在amis以及amis-editor中使用？
（使用amis-widget-cli生成vue的模板npm run build2lib构建的产物,如何在amis中使用（amis通过js-sdk的引入方式）)

[wibetter]

@mrluos

1. amis 是 json 解析器，内置ui组件库（主要在amis-ui中，支持当UI组件库使用），主要能力是 json 到 页面的能力；
2. 如果需要页面可视化能力，需要使用amis-editor，提供可视化界面操作页面json数据，其画布区使用amis json解析器渲染；
3. 如果是vue项目，这两部分需要特殊处理（页面设计器和json页面渲染）：1、页面设计器单独放出来，使用react实现这样一个功能页面（使用amis-editor）；2、页面设计器保存的页面使用amis sdk 渲染。
4. 目前amis-widget-cli 是用于开发爱速搭平台上的NPM扩展包。如果是在amis-editor中使用，完全没必要使用这个脚手架，因为amis和amis-editor提供注册自定义组件的方法，可以直接在项目中注册自己的自定义组件。当然如果是vue的自定义组件，可以使用amis-widget注册成自定义组件。使用amis-widget-cli生成vue的模板npm run build2lib构建的产物，直接将其导入项目中就可以生效，但需确保渲染器脚本加载完成再渲染页面（避免自定义组件渲染失败）。

[mrluos]

非常感谢耐心解答疑惑

[mrluos]

@mrluos

1. amis 是 json 解析器，内置ui组件库（主要在amis-ui中，支持当UI组件库使用），主要能力是 json 到 页面的能力；
2. 如果需要页面可视化能力，需要使用amis-editor，提供可视化界面操作页面json数据，其画布区使用amis json解析器渲染；
3. 如果是vue项目，这两部分需要特殊处理（页面设计器和json页面渲染）：1、页面设计器单独放出来，使用react实现这样一个功能页面（使用amis-editor）；2、页面设计器保存的页面使用amis sdk 渲染。
4. 目前amis-widget-cli 是用于开发爱速搭平台上的NPM扩展包。如果是在amis-editor中使用，完全没必要使用这个脚手架，因为amis和amis-editor提供注册自定义组件的方法，可以直接在项目中注册自己的自定义组件。当然如果是vue的自定义组件，可以使用amis-widget注册成自定义组件。使用amis-widget-cli生成vue的模板npm run build2lib构建的产物，直接将其导入项目中就可以生效，但需确保渲染器脚本加载完成再渲染页面（避免自定义组件渲染失败）。

使用 npm run build2lib 得到的产物，直接在项目中引入以后会报错

我的大概使用的代码：

使用sdk的方式引入amis
index.html

` <script src="sdk/sdk.js"></script>

<script src="cus/infoCard.umd.js"></script>`

test.vue中
let amis = amisRequire("amis/embed"); amis.embed("#render-dom", {type:"vue-info-card"})

[wibetter]

@mrluos 需要看下是不是没有将amis-widget打包进来

[mrluos]

@mrluos 需要看下是不是没有将amis-widget打包进来

我是按照那个脚手架下载了直接打包的

[mrluos]

``

@mrluos 需要看下是不是没有将amis-widget打包进来

@wibetter 直接从https://github.com/aisuda/amis-widget-cli 这个库clone下来，build的

[swieer]

``

@mrluos 需要看下是不是没有将amis-widget打包进来

@wibetter 直接从https://github.com/aisuda/amis-widget-cli 这个库clone下来，build的

一样的问题，请问解决了没有

[wibetter]

@swieer @mrluos build2lib构建后的产物，默认会剔除掉第三方依赖模块，如果要引入其他项目，还需要进行一次构建方可正常使用。
特别说明：构建后的产物虽然是umd模块，但剔除了爱速搭平台中已有的第三方依赖（比如amis、react等），因此不能直接在浏览器中使用。如果需要在浏览器端使用，可以调整构建配置，将第三方依赖模块也打包进来。

[wibetter]

amis-widget-cli和amis-widget 主要用来开发爱速搭平台端自定义组件的，amis-widget-cli构建出的自定义组件不支持在第三方平台直接使用的。
原因：amis-widget-cli在构建自定义组件时会剔除所有第三方依赖，通过NPM扩展包方式添加到平台时会进行一次构建（剔除爱速搭平台端已有的依赖），确保自定义组件能复用平台端的依赖。

[ZhangHaoNemo]

amis-widget-cli和amis-widget 主要用来开发爱速搭平台端自定义组件的，amis-widget-cli构建出的自定义组件不支持在第三方平台直接使用的。 原因：amis-widget-cli在构建自定义组件时会剔除所有第三方依赖，通过NPM扩展包方式添加到平台时会进行一次构建（剔除爱速搭平台端已有的依赖），确保自定义组件能复用平台端的依赖。

您好，我们正在基于贵组 amis 搭建低代码平台，今天刚好查看到您这个回答，所以不知道能不能进一步就“通过NPM扩展包方式添加到平台时会进行一次构建“请教？

1. 能不能理解为当添加一个远程组件时，根据远程组件的依赖重新进行 editor 和 render 项目的构建，将所有远程组件的 第三方依赖 添加，打包后，挂载到某个东西上（比如 window）。
2. 我注意到 amis-widget webpack-node-external 配置 importType 是 require，是自己实现了一个全局 require 方法读取前面说的挂载内容吗？
3. 版本控制怎么做呢？

[wibetter]

@ZhangHaoNemo amis-widget-cli 打包的 NPM扩展包 在导入到 爱速搭平台时会 再进行一次构建，在这里会进行一些特殊处理（比如和平台共享依赖），版本也是在 爱速搭平台中进行管理的。