【源码】基于Rollup和React的Canvas项目

项目简介

本项目借助Rollup进行依赖打包，融合React和Canvas相关技术，致力于构建一个兼容性佳、性能良好的应用。在打包与运行进程中，针对常见问题加以处理，通过引入系列插件解决语法解析、CSS处理、代码压缩等问题。

项目的主要特性和功能

1. Rollup打包优化：运用Rollup开展依赖打包，解决工程默认导出文件、React组件解析、新特性解析等打包难题。
2. React支持：支持React组件开发，处理class组件属性和修饰符打包报错问题。
3. CSS处理：利用rollup-plugin-postcss和rollup-plugin-postcss-modules处理CSS，支持Css Module。
4. 代码压缩：采用rollup-plugin-terser进行代码压缩，避免uglif插件压缩报错问题。
5. 数学计算支持：实现海伦公式以及线性方程、垂直方程。

安装使用步骤

安装依赖

1. 确保已安装yarn。
2. 在项目根目录下执行以下命令安装依赖： bash yarn add canvas rollup react

打包项目

1. 配置好rollup.config.js和.babelrc文件。
2. 执行打包命令： bash rollup -c

运行项目

运行打包后的文件，若遇到报错，可引入@babel/plugin-transform-runtime解决。

注意事项

• rollup.config.js中plugins顺序需注意，先babel()再commjs()。
• .babelrc中@babel/plugin-proposal-decorators顺序必须在class-properties前。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】