rollup开发自己的组件库(5)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了rollup开发自己的组件库(5)相关的知识,希望对你有一定的参考价值。

参考技术A 3.修改package.json

4.修改rollup.config.js

5.npm run build

打开打包好的文件看一下,2000+行,实际上react还是被打包了进来
6.修改rollup.config.js

7.npm run build

8.关于语法的问题
这个也是我在最开始说的,在tsconfig中控制

主要就是target和module这两个参数
同样的,也可以再引入rollup的bable插件再转一次,这个就看每个开发者的使用情况了,如果你清楚你自己项目的webpack配置,大可以不支持某些版本的javascript

9.调试问题
npm link 这个命令,可以直接联入某个项目

基于rollup搭建JavaScript类库开发环境

 
平时开发过程中,积累了不少的经验和技巧都应用到项目中,而下次用到的时候却又开始到处翻。
有时也想自己搭建个类库或工具包什么的来积累自己的经验技巧,又没有专门的时间去搭建各种
环境,像rollup或者webpack这样的打包工具、ES6转码工具Babel、Eslint、Jest测试工具等等。
这里就特意做了一个起始项目,将rollup、ES6转码、Eslint、Jest都集成起来,平时用的时候只需要
积累模块和方法即可。
 
本文参考:基于Webpack和ES6打造Javascript类库 http://web.jobbole.com/84858/,由于webpack打包
类库的时候会附带一个小型的加载器,有点多余,因此选用rollup搭建。
 
# 要点记录
1. 使用`rollup.js`提供的`Js api`进行`bundle`打包
2. 使用`babel`转码类库中的`ES2015`语法,不对`module`转换,由`rollup`处理
3. `Node`版本要大于`7.10.1`版本,因为构建脚本中使用了`await`、`async`
4. 使用`jest`进行单元测试,同时使用`rollup-plugin-babel`转换测试脚本语法,配置文件为`.babelrc`中`test`节
5. `sourcemap`的生成由`bundle.write`完成,而转码后的源代码由`fs`模块写入
希望大家都能把平时的努力积累起来,最终垒成自己的技术高楼。

以上是关于rollup开发自己的组件库(5)的主要内容,如果未能解决你的问题,请参考以下文章

为 React 组件库使用 Rollup

Rollup.js 没有捆绑我的 React 组件库字体

React + Antd + Rollup 组件库“错误:无效的钩子调用。钩子只能在函数组件的主体内部调用”

前端组件/库打包利器rollup使用与配置实战

Vue 3.0组件库初始化

当我从样式组件中使用我自己的库时出现无效的钩子调用错误