Rollup:打包 TypeScript - React 组件库

调用浏览器摄像头拍照组件

  • 1、前提
  • 1、安装依赖
  • [2、添加 rollup.config.js 配置](#2、添加 rollup.config.js 配置)
  • [3、修改 package.json](#3、修改 package.json)
    • [3.1 添加打包命令](#3.1 添加打包命令)
    • [3.2 添加组件入口](#3.2 添加组件入口)
    • [3.3 添加组件声明入口](#3.3 添加组件声明入口)
    • [3.4 浏览器支持](#3.4 浏览器支持)

1、前提

1.1 通过 create-react-app take-photo --template 创建前端应用

1.2 添加组件 TakePhoto (拍照组件)

1.3 App 为测试组件

1.4 目录结构

1、安装依赖

powershell 复制代码
@rollup/plugin-commonjs 
@rollup/plugin-image
@rollup/plugin-node-resolve
@rollup/plugin-terser
@rollup/plugin-typescript
autoprefixer
postcss
postcss-preset-env
postcss-url
rollup
rollup-plugin-delete
rollup-plugin-postcss

2、添加 rollup.config.js 配置

javascript 复制代码
const { nodeResolve } = require('@rollup/plugin-node-resolve');
// 允许使用 node 或 umd 包
const commonjs = require( '@rollup/plugin-commonjs');
// 打包前清空输出目录
const del = require( 'rollup-plugin-delete');
// 压缩代码
const terser = require('@rollup/plugin-terser');
// 编译 TS 代码
const typescript = require( '@rollup/plugin-typescript');
// 处理scss
const postcss = require( 'rollup-plugin-postcss');
// 处理scss 添加前缀
const autoprefixer = require( 'autoprefixer');
// 处理 css 中引入的图片
const postCssUrl = require("postcss-url");
// 处理组件引入的图片
const image = require('@rollup/plugin-image');

module.exports = {
  input: 'src/TakePhoto/index.tsx',
  output: [
    {
      file: 'dist/TakePhoto/index.js',
      format: 'umd',
      name: 'TakePhoto',
      globals: {
        react: 'React',
        'react-dom': 'ReactDom'
      }
    }
  ],
  external: ['react', 'react-dom'],
  plugins: [
    del({ targets: 'dist/*', verbose: true }),
    nodeResolve(),
    commonjs(),
    terser(),
    typescript({
      "include": [
        "src/TakePhoto/*",
        "src/types.d.ts"
      ]
    }),
    postcss({
      extensions: ['.css', '.scss'],
      inject: true,
      minimize: true,
      plugins: [
        postCssUrl({
          url: 'inline'
        }),
        autoprefixer()
      ],
    }),
    image()
  ]
};

3、修改 package.json

3.1 添加打包命令

javascript 复制代码
"scripts": {
    // 其他命令...
    "build": "rollup --config"
},

3.2 添加组件入口

javascript 复制代码
"main": "dist/TakePhoto/index.js",

3.3 添加组件声明入口

javascript 复制代码
"types": "dist/TakePhoto/index.d.ts",

3.4 浏览器支持

javascript 复制代码
"browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all",
    "Firefox >= 52",
    "IE >= 10"
],
相关推荐
吃饺子不吃馅28 分钟前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试
鹏多多37 分钟前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
Cosolar1 小时前
前端如何实现VAD说话检测?
前端
CodeSheep1 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅1 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒2 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip9 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫10 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel11 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端