最近在一次 coding 中，需要将一个 echarts 组件编译为一个可调用的组件，这在之前是没有接触过的。
以显示一个 echarts 官网的简单的折线图为例：
下面是 echarts 官网所提供的核心代码。
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
option && myChart.setOption(option);要实现编译首先需要引入几个库文件。
npm insatll echarts -S // 安装 echarts
npm install -g browerify // 用来编译的库 browerify
npm install tinyify -S // 优化编译的 browerify 插件 文件结构如下：
在 main.js 中写入以下代码：
window.init = (id) => {
var echarts = require('echarts');
var chartDom = document.getElementById(id);
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
option && myChart.setOption(option);
}index.html 中调用组件：（提前写好引入编一的 js 文件，使用 init() 函数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/dist/bundle.js"></script>
</head>
<body>
<div id="app" style="width: 400px;height: 400px;"></div>
<script>
init('app');
</script>
</body>
</html>先只使用 browerify 进行编译：
browerify ./echarts/main.js dist/bundle.js确认在 dist 文件夹下生成 bundle.js 后执行 index.html 发现并没有起效果，F12 发现控制台输出了如下错误：
发现第 5090 行编译后前后双引号消失了（不仅仅是这一行，之后很多中文都被编译成了这样）。一开始以为是文件编码问题，经过多次排查后发现无论文件怎么编码，它都无法正常编译，然后就经过了漫长的 github 和 google。
终于发现了 tinyify 这个东西。
browserify -p tinyify ./demo1/main.js > dist/bundle.js使用 tinyify 这个插件进行编译的话，编译后的文件大小也变小了很多，将原文件中所有的空格、换行符都去掉了。
更重要的是，运行 index.html 后：
问题解决了。文件的编码问题也得到了解决。
2242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
