0.0.1 • Published 2 years ago

free-chart v0.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

一、使用方式

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
  1. 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"
  }
}
  1. 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

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

  2. eslint 配置

  • elint 下载
npm i eslint --save-dev
  • 同级目录下 eslintrc.js 进行 eslint 配置，配置内容可前往对应文件查看
  1. 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
  1. .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.

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"; // ()
  1. 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中的内容
  1. 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"
  ],
}

2.

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';
@everything-registry/sub-chunk-1701@infinitebrahmanuniverse/nolb-free
0.0.1

2 years ago