add .js extension in the import statement

[pissang]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

As discussed in #16054. This PR trys to add an extra transform step to add .js extension to the import statement after lib is generated.

So before the statement is:

import * as zrender from 'zrender/lib/zrender';

Now it becomes:

import * as zrender from 'zrender/lib/zrender.js';

So specific modules in the lib can be imported in the browsers more conveniently.

Misc

• The API has been changed (apache/echarts-doc#xxx).
• This PR depends on ZRender changes (Add .js extension in the import statement of es modules. ecomfe/zrender#862).

Related test cases or examples to use the new APIs

Still there some required steps needs to be done before we actually importing the modules:

1. For the modules from dependencies. Import map need to be configured.

<script type="importmap">
{
  "imports": {
    "echarts/": "https://unpkg.com/echarts@latest/",
    "zrender/": "https://unpkg.com/zrender@latest/",
    "tslib": "https://unpkg.com/[email protected]/tslib.es6.js"
  }
}
</script>

2. Because the generated code use process.env.NODE_ENV on the dev only code. We need to define it in the browsers environment

if (typeof process === "undefined" || !process.env) {
  window.process = {
    env: {
      NODE_ENV: "development",
    },
  };
}

Then we can importing modules just like in the bundling environment.

import * as echarts from "echarts/core.js";
import { PieChart } from "echarts/charts.js";
import { CanvasRenderer } from "echarts/renderers.js";
echarts.use([PieChart, CanvasRenderer]);

But still there are limitations. Because this API design heavliy depends on dead code removal to do the tree-shaking, which seems to be not supported by the browsers yet. So it will still import all the charts from echarts/charts.js, not only the pie chart we needed.

This problem not exists if we use our legacy partially importing API:

import * as echarts from "echarts/lib/echarts";
import "echarts/lib/chart/pie.js";

It will only import the pie chart and all the modules it depends on.

Others

Merging options

• Please squash the commits into a single one when merging.

Other information

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

The pull request is marked to be PR: author is committer because you are a committer of this project.

This PR depends on ZRender changes. Please update the ZRender dependency to the latest nightly version including this change, which takes place everyday at 8:00 UTC (16:00 Beijing Time).
You can use npm i zrender@npm:zrender-nightly@dev to update package.json.
If you have any question about this, please leave a comment and we will give you extra help on this.

[pissang]

@plainheart Just updated zrender to the latest nightly

[echarts-bot]

Congratulations! Your PR has been merged. Thanks for your contribution! 👍