esm-component v1.0.7

esm component

可以动态加载的组件

开发

在自己项目里进行组件开发，大概流程如下

• 1.创建一个文件夹，下面有 package.json,至少包含以下几个配置项

{
 "name": "line-chart", // 组件名称
 "version": "1.1", // 组件版本
 "fec": {
   "outerLib": ["react", "echarts-for-react"] // 需要从外部工程传入的库，组件打包时不会打包这些库
 }
}

• 2.创建一个 index.tsx 作为默认的入口文件，开始写自己的组件，例如

import React from 'react';
import ReactECharts from 'echarts-for-react';
import './index.less';

interface IProps {
  data: any[];
}

export default function tableLineChart(props: IProps) {
  const { data } = props || {};
  const chartData = {
    grid: {
      left: 5,
      top: 5,
      bottom: 5,
      right: 5,
    },
    xAxis: [
      {
        show: false,
        axisTick: {
          alignWithLabel: true,
        },
        boundaryGap: false,
      },
    ],
    yAxis: [
      {
        show: false,
      },
    ],
    series: [
      {
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(77,131,244,0.20)',
                },
                {
                  offset: 1,
                  color: 'rgba(76,131,243,0.00) ',
                },
              ],
              globalCoord: false,
            },
          },
        },
        data,
        type: 'line',
        lineStyle: {
          color: '#4C83F3',
          width: 1.5,
        },
        symbol: 'circle',
        symbolSize: 4,
        itemStyle: {
          normal: {
            color: '#4C83F3',
            borderColor: '#fff',
            borderWidth: 1,
          },
        },
      },
    ],
  };

  return (
    <div className="line-chart-box">
      <ReactECharts
        className="line-chart"
        option={chartData}
        notMerge={true}
        lazyUpdate={false}
      />
    </div>
  );
}

• 3.使用命令行工具启动当前组件的编译和 dev server

npm run dev #实际可能不是这个命令，只是放在这示意一下

• 4.根据下面的使用流程把组件接入到页面里开始在本地调试

组件管理

• 1.发布组件，需要先改一下前面提到的 package.json 中的 version 字段，然后

npm run publish #实际可能不是这个命令，只是放在这示意一下

此处会调用配置 server 的 api 去发布当前版本

组建管理 server

这里有两个接口，put 和 get

• put 添加某个组件的元信息

{
  request: {
    body: {
      name: 'line-chart',
      version: '1.1.5'
      main: 'https://cdn.com/lineChart@1.1.5.js',
    deps: [
      'https://cdn.com/lineChart-1641299144516.css',
    ],
    }
  },
  response: {
    success: true
  }
}

• get 根据参数返回当前组件的元信息

{
  request: {
    query: {
      name: 'line-chart@1'
    }
  },
  response: {
    // 返回最新的1.x.x版本
    main: 'https://cdn.com/lineChart@1.1.5.js',
    deps: [
      'https://cdn.com/lineChart-1641299144516.css',
    ],
  }
}

使用

大概流程如下

• 1.在项目的入口文件加入一下代码，来注册需要传给组件的库

import { register } from 'esm-component';
register({
  react: React,
  'echarts-for-react': ReactECharts,
  __dev__: true, // 这个字段用来标识是否为本地开发环境，开发环境会自动链接前面开发流程3中提到的dev server,此处例子为写死的true,实际应该会按照自己项目编译的环境变量来替换，比如:
  // __dev__: __BUILD_ENV__ === 'local',
});

• 2.在要使用组件的位置加入如下代码，就引入了组件

import { esmc } from '@didi/esm-component';
import React from 'react';

export default component () {
 return (
   <div>
    <span>test</span>
    {esmc('line-chart@1', props)} // 此处@1代表使用最新的1.x.x版本的组件
   </div>
 )
}