rollup开发自己的组件库（5）

本章介绍怎么打包一个react的组件，内容未必可靠，在各式各样的webpack环境/脚手架下，什么奇葩问题都会有
demo https://github.com/757566833/rollup-guide

有很多人读了package.json的规范，了解了peerDependencies的东西，会把这个直接带入rollup中，官方文档也有 peer Dependencies，造成了一定的误会
1.添加react,react-dom

yarn add react react-dom @types/react @types/react-dom --dev

src/main.ts改为src/main.tsx

import React from 'react';
export default class ButtonComponent extends React.Component {
    constructor(props:any) {
        super(props)
    }
    render(){
        return (
            <button>ButtonComponent</button>
        )
    }
}

3.修改package.json

{
 ...
  "peerDependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  ...
}

4.修改rollup.config.js

import path from 'path';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json'
/** @type {import('rollup').RollupOptions} */
const options = {
    input: 'src/main.tsx',
    output: [{
        file: path.resolve(__dirname, pkg.main),
        format: 'cjs'
    }, {
        file:  path.resolve(__dirname,  pkg.module),
        format: 'es',
    }],
    plugins: [resolve(),commonjs(),typescript()]
};
export default options;

5.npm run build

image.png

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

import path from 'path';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json'
/** @type {import('rollup').RollupOptions} */
const options = {
    input: 'src/main.tsx',
    output: [{
        file: path.resolve(__dirname, pkg.main),
        format: 'cjs'
    }, {
        file:  path.resolve(__dirname,  pkg.module),
        format: 'es',
    }],
    external:['react'],
    plugins: [resolve(),commonjs(),typescript()]
};
export default options;

7.npm run build

image.png

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

image.png

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

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