开发工具使用说明

开发NPM组件扩展包时会用到两个工具包: amis-widget、amis-widget-cli。

amis组件注册器（支持react、vue2.0、vue3.0和jQuery技术栈），主要用于注册amis渲染器、amis-editor插件。

一个完整的自定义组件包含两个功能模块：amis渲染器和 amis-editor插件，其中『amis渲染器』是页面渲染时需要调取的模块，如果没有它则意味着页面中不能正常显示自定义组件内容。而『amis-editor插件』是打通页面设计器的关键功能模块，可用于设置自定义组件在页面设计器中的组件物料面板中的显示位置（哪个分类下展示，展示顺序是什么，描述信息是什么等），也可用于设置首次插入页面时的初始数据是什么，所有和页面设计器关联的数据都在这个『amis-editor插件』中。

amis-widget 详细使用说明: amis-widget 。

amis-widget-cli 是用于开发amis自定义组件的脚手架，其核心是基于AKFun现有的工程能力，为用户提供自定义组件模板下载、预览、编译、多技术栈支持等功能。

支持三种自定义组件本地调试方式

preview（组件预览模式）: 用于预览当前自定义组件内容；
dev（本地开发模式）: 在本地页面设计器中调试自定义组件，用于确认页面设计器中能否正常使用和展示当前自定义组件；
linkDebug（外链调试）: 在爱速搭中预览和调试本地的自定义组件，用于确认爱速搭平台中能否正常使用和展示当前自定义组件。

amis-widget-cli 详细使用说明: amis-widget-cli 。

支持配置自定义webpack plugin 和 loader

module.exports = {
  ...
  webpack: {
    ...
    moduleRules: [], // 用于添加自定义 loaders
    plugins: [], // 用于添加自定义 plugins
  }
  ...
}

支持配置自定义babel plugin

module.exports = {
  ...
  webpack: {
    ...
    babelPlugins: [  // 用于添加自定义 Babel plugins
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  }
  ...
}

备注: 以上自定义babel plugin 用于实现 element-ui 组件按需引入。

其中babelPlugins也支持配置成function，可用于调整或者重写脚手架内置的 babel plugins

module.exports = {
  ...
  webpack: {
    ...
    babelPlugins: (curBabelPlugins) => {
      // 通过 curBabelPlugins 来调整当前 Babel plugins
      curBabelPlugins.push({...});
    },
  }
  ...
}

amis-widget​

amis-widget-cli​

amis-widget

amis-widget-cli