一、使用方式

let chart = new FreeChart(dom);
chart.setOptions({
  grid: {
    padding: 20,
  },
  xAxis: {
    step: 20,
  },
  yAxis: {
    formatter: (value) => {
      return value * 1;
    },
  },
  series: {
    type: "Polyline",
    eraseStyle: {
      show: true,
      style: {
        width: 10, // 擦除宽度
      },
    },

    display: {
      style: {
        stroke: "red", // 描边样式,线的颜色
        lineWidth: 1,
      },
    },
    shape: {
      points: [0, 2, 3, 4, 5, 6, 7, 8, 9],
      smooth: 1,
    },
  },
});

二、npm 包制作流程（搭建，打包，调试，发布）

涉及内容

• npm 初始化

• package.json 配置

• eslint

• ---

1. 包初始化

cd <package-name>
npm init

2. package.js 配置

{
  "name": "wavefromchart", //包名称
  "version": "0.0.1", // 版本号，每次提交包到npm时，需要保证当前包版本与已发布的包版本不同
  "description": "wavefromchart draw",  //包描述
  //TAG：★ main,module,files 需要添加
  "main": "dist/freeChart.umd.js",
  "module": "dist/freeChart.umd.js",
  "files": [
    "src",
    "dist/*.js"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [  // 包搜索关键字
    "wavefromchart",
    "wavefrom"
  ],
  "author": "liyuanyuan",
  "license": "ISC",
  "dependencies": {
    "zrender": "^5.3.1"
  }
}

3. rollup 配置

因为我们使用了 ES6，且希望包能在多个环境下运行。所以我们需要使用到打包工具

• 安装 rollup

npm i rollup --save-dev

• 安装 rollup 插件
  • rollup-plugin-node-resolve
  • rollup-plugin-commonjs
  • rollup-plugin-babel
  • rollup-plugin-eslint

npm i --save-dev rollup-plugin-node-resolve  rollup-plugin-commonjs rollup-plugin-babel rollup-plugin-eslint

3. 创建 rollup.config.js，并配置

4. eslint 配置

• elint 下载

npm i eslint --save-dev

• 同级目录下 eslintrc.js 进行 eslint 配置，配置内容可前往对应文件查看

5. babel

为了支持 ES6 语法，需要引入 babel 转换

• 安装

npm i  @babel/core @babel/preset-env  @babel/plugin-transform-runtime --S-D

• babel 配置 创建 babel.config.js 文件

添加打包配置

{
    ....

    "script": {
       // 指定rollup运行的配置文件，并监听文件修改。
       "dev": "rollup -c rollup.config.js -w",
       "build": "rollup -c rollup.config.js",
    }
    // -c 执行配置文件
    // -w 监听文件修改，当文件修改后将重新打包
}

使用 ts 进行构建

• 安装 TypeScript npm install typescript -D
• 安装 TypeScript 转换器 npm install rollup-plugin-typescript2 -D

npm install typescript --save-dev
npm install rollup-plugin-typescript2 -save-dev

打包过程中遇见的问题 ISSUE!:1 Parsing error: Unexpected token 错误解决方案 问题描述：

import 动态导入文件，执行 npm run build 单独打包 js 文件时，webpack 打包出错。

class Zchart {
  /**
   *  zRender实例
   */
  zr = null;  // error  Parsing error: Unexpected token =
}



 error  Parsing error: Unexpected token =

分析： 禁用 rollup.config.js 中的 eslint ，webpack 打包正常，是 eslint 解析错误

解决方案

1. 下载 babel-eslint 插件

npm i babel-eslint --save-dev

2. .eslintrc.js 配置

module.export={

    parserOptions: {
      parser: require.resolve("babel-eslint"), // 配置eslint的解析babel解析，否则会报错
      ecmaVersion: 2018,
      sourceType: "module",
    },
}

ISSUE! 2 Parsing error: 'import' and 'export' may appear only with 'sourceType: module' 解决：如上一块代码，eslintrc.js 中 parserOptions 中 sourceType

ISSUE:

Entry module "src/main.js" is implicitly using "default" export mode, which means for CommonJS output that its default export is assigned to "module.exports". For many tools, such CommonJS output will not be interrollup v2.70.2
bundles ./src/main.js → dist/index.js...

[!] Error: Incompatible tsconfig option. Module resolves to 'CommonJS'. This is incompatible with rollup, please use 'module: "ES2015"' or 'module: "ESNext"'.

ISSUE: error: failed to push some refs to 'https://gitee.com/alwayslucky/waveform-chart.git' 这个问题是因为远程库与本地库不一致造成的，那么我们把远程库同步到本地库就可以了。

git pull --rebase origin master

添加 ts

• @typescript-eslint/eslint-plugin 用于 eslint 检查 ts

• @typescript-eslint/parser 用于 eslint 检查 ts

• rollup-plugin-typescript2

//rollup.config.js
import typescript from "rollup-plugin-typescript2";
export default{
    ...,
    input:'', //改为ts入口
    plugins:[
        typescript()
    ]
}

{
  "compilerOptions": {
    /* 基础配置 */
    "target": "esnext",
    "lib": ["dom", "esnext"],
    "removeComments": false,
    "declaration": true,
    "sourceMap": true,
    /* 强类型检查配置 */
    "strict": true,
    "noImplicitAny": false,
    "strictPropertyInitialization": false /* Check for class properties that are declared but not set in the constructor. */,
    /* 模块分析配置 */
    "baseUrl": ".",
    "outDir": "./dist",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true
  },
  "include": ["src"]
}

//
module.exports = {
    ...,
    parser: "@typescript-eslint/parser",
    plugins: ["@typescript-eslint"],
}

一 编译中 问题

1. eslint 解析 ts 时，提示 eslint Parsing error: Unexpected token :

• 问题

eslint Parsing error: Unexpected token :

• 解决

// .eslintrc.js
module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
};

2. rollup 解析 ts 时报错 TS2683

[!] (plugin rpt2) Error: G:/lyy1/code/wave-chart/src/WaveChart.ts(25,21): semantic error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.

// 解决

//tsconfig.json
{
  "compilerOptions":{
    "noImplicitThis": false, // true 当' this '被赋予类型' any '时，启用错误报告。
  }
}

• 考虑到 rollup 使用的 rollup-plugin-typescript2 开启 ts，查看官网有一句提到

The plugin inherits all compiler options and file lists from your tsconfig.json file.

• https://www.npmjs.com/package/rollup-plugin-typescript2

render 使用中遇到的问题

1. zrender 引入时一直提示 Renderer 'undefined' is not imported. Please import it first.

if (!painterCtors[rendererType]) {
  throw new Error(
    "Renderer '" + rendererType + "' is not imported. Please import it first."
  );
}

// 检查原因后，应该是 引入文件时引起的问题，一开始，先是引入
import * as zrender from "zrender/index"; //error
import * as zrender from "zrender/src/all"; // error

// 下面是正确引入方式
import * as zrender from "zrender/lib/all"; // ()

2. rollup 在打包软件时，对于引入的第三方库，没有执行成功（时而成功，时而不成功）

   大意是 Rollup 默认只解析相对路径的模块,对于以绝对路径引入的模块,不会作为 bundle 的一部分引入，这种模块会作为运行时的外部依赖，如果你就是想这样，你可以将模块 id 写入 external 数组。 如果你不想让你的模块运行时依赖这种第三方引入的模块，你需要让 Rollup 找到并将其一并打包到 bundle 中 可以使用@rollup/plugin-node-resolve。 对于一些在 node.js 模块，如果想要运行在浏览器端 可能会需要 rollup-plugin-node-polyfills。直接引入该模块 参考链接

• 现象描述

import * as Zrender from "zrender/lib/all.js";
console.log(Zrender); // 不打印的话，all.js没有执行，只执行了对应all.d.ts中的内容

3. TS2532: Object is possibly 'undefined'.

ISSUE: import node-module 下的文件时默认引入的是哪个文件？ ISSUE: .ts 文件和 .d.ts 文件的区别 ISSUE: CommonJS 是什么 ISSUE： rollup 配置 ISSUE: eslint 配置 ISSUE: ts 配置

ISSUE!: 在本地连接 npm 包进行本地调试

发布之后，使用中的问题

1. npm install 包名之后， 引入到项目中，并且编写代码，但是页面中，没有正常展示图形（在 html 页面中使用打包后的文件是正常的） TAG：发布时 应添加 main,module,和 files ISSUE package.js 中 main，module,files 意义

   參考 https://www.jianshu.com/p/90ff2a66400c

{

  "main": "dist/freeChart.umd.js",
  "module": "dist/freeChart.umd.js",
  "files": [
    "src",
    "dist/*.js"
  ],
}

Could not find a declaration file for module 'free-chart'. 'G:/lyy1/code/wave-chart/dist/freeChart.umd.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/free-chart` if it exists or add a new declaration (.d.ts) file containing `declare module 'free-chart';