共计 2897 个字符，预计需要花费 8 分钟才能阅读完成。
最近在用 rollup 打包构建 echarts 文件的时候呈现了很多问题，终于最初跑通呈现了折线图，在此记录一下，前面再次遇到问题便于回顾。
1、筹备工作：创立本人的工程和装置 echarts
应用命令行创立本人的工程
| mkdir myLine | |
| cd myLine |
在 myProject 目录下应用命令行，初始化工程的 npm 环境并装置 echarts（这里前提是您曾经装置了 npm)
| npm init | |
| npm install echarts --save |
2 在 myProject 目录下应用 npm 装置 rollup：
| npm install rollup --save-dev | |
| npm install rollup-plugin-node-resolve --save-dev | |
| npm install rollup-plugin-uglify --save-dev | |
| npm install rollup-plugin-commonjs --save-dev | |
| npm install rollup-plugin-replace --save-dev |
3、接下来创立我的项目 JS 文件 myline/line.js 来绘制图表，内容为
| // line.js | |
| // 引入 echarts 主模块, 官网文档引入如下第一行，然而会有问题，因而批改为现如今这种门路 | |
| // import * as echarts from 'echarts/slib/echarts'; | |
| import * as echarts from 'echarts'; | |
| // 引入折线图。import 'echarts/src/chart/line'; | |
| // 引入提示框组件、题目组件、工具箱组件。import 'echarts/src/component/tooltip'; | |
| import 'echarts/src/component/title'; | |
| import 'echarts/src/component/toolbox'; | |
| // 基于筹备好的 dom，初始化 echarts 实例并绘制图表。echarts.init(document.getElementById('main')).setOption({title: {text: 'Line Chart'}, | |
| tooltip: {}, | |
| toolbox: { | |
| feature: {dataView: {}, | |
| saveAsImage: {pixelRatio: 2}, | |
| restore: {}} | |
| }, | |
| xAxis: {}, | |
| yAxis: {}, | |
| series: [{ | |
| type: 'line', | |
| smooth: true, | |
| data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]] | |
| }] | |
| }); |
4、对于不反对 ES Module 的浏览器而言，方才创立的 myLine/line.js 还不能间接被网页援用并在浏览器中运行，须要进行构建。应用 rollup 构建前，须要创立它的配置文件 myProject/rollup.config.js，内容如下：
这里将 import uglify from 'rollup-plugin-uglify' 改为 import {uglify} from 'rollup-plugin-uglify'
除此之外还引入了 rollup-plugin-replace 插件
| // rollup.config.js | |
| // 这个插件用于在 `node_module` 文件夹（即 npm 用于治理模块的文件夹）中寻找模块。比方，代码中有 | |
| // `import 'echarts/lib/chart/line';` 时，这个插件可能寻找到 | |
| // `node_module/echarts/lib/chart/line.js` 这个模块文件。import nodeResolve from 'rollup-plugin-node-resolve'; | |
| // 用于压缩构建出的代码。// import uglify from 'rollup-plugin-uglify'; 这是官网的写法会报错 | |
| import {uglify} from 'rollup-plugin-uglify'; | |
| // 用于多语言反对（如果不须要可疏忽此 plugin）。// import ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang'; | |
| import commonjs from 'rollup-plugin-commonjs'; | |
| import replace from 'rollup-plugin-replace'; | |
| export default { | |
| // name: 'myProject', | |
| // 入口代码文件，就是方才所创立的文件。input: './line.js', | |
| plugins: [nodeResolve(), | |
| // ecLangPlugin({lang: 'en'}), | |
| // 打消代码中的 __DEV__ 代码段，从而不在控制台打印谬误提示信息。uglify(), | |
| commonjs(), | |
| replace({'process.env.NODE_ENV': JSON.stringify('env') | |
| }) | |
| ], | |
| output: { | |
| // 以 UMD 格局输入，从而能在各种浏览器中加载应用。format: 'umd', | |
| // 输入 source map 便于调试。sourcemap: true, | |
| // 输入文件的门路。file: 'lib/line.min.js' | |
| }<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>line chart</title> | |
| </head> | |
| <body> | |
| <!-- 为 echarts 筹备一个具备大小（宽高）的 Dom。--> | |
| <div id="main" style="width: 600px;height:400px;"></div> | |
| <!-- 引入方才构建好的文件。--> | |
| <script src="lib/line.min.js"></script> | |
| </body> | |
| </html> |
5、而后在 myProject 目录下应用命令行，构建工程代码 myProject/line.js：
应用 .node_modules.binrollup -c 命令构建line.js。在 Windows 环境下，门路符号须要用反斜杠。
6、构建生成的 myLine/lib/line.min.js 文件包含了工程代码和 echarts 代码，并且仅仅包含咱们所须要的图和组件，并且能够在浏览器中应用。咱们能够用一个示例页面来测试一下，创立文件 myProject/line.html，内容如下：
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>line chart</title> | |
| </head> | |
| <body> | |
| <!-- 为 echarts 筹备一个具备大小（宽高）的 Dom。--> | |
| <div id="main" style="width: 600px;height:400px;"></div> | |
| <!-- 引入方才构建好的文件。--> | |
| <script src="lib/line.min.js"></script> | |
| </body> | |
| </html> |
7、在浏览器里关上 myProject/line.html 则会失去如下成果：
正文完
发表至： javascript
2020-12-22
