解決使用rollup構建ECharts過程中遇到的問題

1.ECharts官方文檔

參考：自定義構建 ECharts - ECharts Documentation

2.解決問題

改動一：

// line.js

// 引入 echarts 主模塊。
// import * as echarts from 'echarts/lib/echarts';
// 引入折線圖。
// import 'echarts/lib/chart/line';
// 引入提示框組件、標題組件、工具箱組件。
// import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/title';
// import 'echarts/lib/component/toolbox';

import * as echarts from 'echarts/src/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]]
    }]
});

注意：這里將echarts/lib/**改為echarts/src/**，因為在使用構建后的文件時出現require is not defined錯誤。

改動二：

// 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';

export default {
    name: 'myProject',
    // 入口代碼文件，就是剛才所創建的文件。
    input: './line.js',
    plugins: [
        nodeResolve(),
        // ecLangPlugin({lang: 'en'}),
        // 消除代碼中的 __DEV__ 代碼段，從而不在控制台打印錯誤提示信息。
        uglify()
    ],
    output: {
        // 以 UMD 格式輸出，從而能在各種瀏覽器中加載使用。
        format: 'umd',
        // 輸出 source map 便於調試。
        sourcemap: true,
        // 輸出文件的路徑。
        file: 'lib/line.min.js'
    }
};

注意：這里將import uglify from 'rollup-plugin-uglify'改為import {uglify} from 'rollup-plugin-uglify'。

改動三：
使用.\node_modules\.bin\rollup -c命令構建line.js。在Windows環境下，路徑符號需要用反斜杠。

最后，在瀏覽器看到如下效果。

提示：大家可以先按照ECharts官方文檔來做，看看報了什么錯誤，再做修改。