如何将 React 应用程序与汇总捆绑在一起

Posted 2023-02-19

【中文标题】如何将 React 应用程序与汇总捆绑在一起

【英文标题】：How to bundle react app with rollup

【发布时间】：2018-12-19 20:28:48

【问题描述】：

我正在寻求有关汇总配置的帮助以构建最简单的反应应用程序。

目前我捆绑的 js 文件并没有真正捆绑任何依赖项，看起来很简单。

Repo to repro

rollup config file

bundled JS file

我的汇总配置：

import babel from 'rollup-plugin-babel';
import filesize from 'rollup-plugin-filesize';
import nodeResolve from 'rollup-plugin-node-resolve';
import progress from 'rollup-plugin-progress';
import visualizer from 'rollup-plugin-visualizer';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';

export default 
  input: 'src/index.js',
  output: [
    
      file: 'dist/index.js',
      format: 'umd',
      globals: 
        react: 'React',
        'react-dom': 'ReactDOM',
        'styletron-react-core': 'StyletronReactCore',
      ,
      sourcemap: 'inline',
    ,
  ],
  external: ['react', 'react-dom', 'styletron-react-core'],
  plugins: [
    progress(),
    nodeResolve(
      browser: true,
    ),
    json(),
    babel(
      babelrc: false,
      presets: [['es2015',  modules: false ], 'stage-1', 'react'],
      plugins: ['external-helpers'],
    ),
    visualizer(),
    filesize(),
    commonjs(
      include: 'node_modules/**',
    ),
  ],
;

【参考方案1】：

如果有人遇到这种情况： 这是我的工作汇总配置。

我也更新了demo repo。

import babel from 'rollup-plugin-babel';
import filesize from 'rollup-plugin-filesize';
import nodeResolve from 'rollup-plugin-node-resolve';
import progress from 'rollup-plugin-progress';
import visualizer from 'rollup-plugin-visualizer';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';

export default 
  input: 'src/index.js',
  output: [
    
      file: 'dist/index.js',
      format: 'umd',
      sourcemap: 'inline',
    ,
  ],
  plugins: [
    progress(),
    nodeResolve(
      browser: true,
    ),
    json(),
    commonjs(
      include: [
        'node_modules/**',
      ],
      exclude: [
        'node_modules/process-es6/**',
      ],
      namedExports: 
        'node_modules/react/index.js': ['Children', 'Component', 'PropTypes', 'createElement'],
        'node_modules/react-dom/index.js': ['render'],
      ,
    ),
    babel(
      babelrc: false,
      presets: [['es2015',  modules: false ], 'stage-1', 'react'],
      plugins: ['external-helpers'],
    ),
    visualizer(),
    filesize(),
    replace(
      'process.env.NODE_ENV': JSON.stringify('production'),
    ),
  ],
;

我最初的问题是假设 React 依赖是外部的。这对于组件库是正确的，但不适用于独立应用程序。我还必须修复一些小问题并命名导入映射。

希望这可以节省一些时间。

【参考方案2】：

这是一个使用受支持的 rollup 插件的更新版本，适用于偶然发现此问题并希望得到 TypeScript 支持的任何新人：

// rollup.config.js

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';

export default 
      input: 'src/index.ts',
      output: [
        
          file: 'dist/index.js',
          name: 'app',
          sourcemap: 'inline',
          format: 'iife',
        ,
      ],
      plugins: [
        peerDepsExternal(),
        resolve(
          browser: true,
          dedupe: ['react', 'react-dom'],
        ),
        replace(
          'process.env.NODE_ENV': JSON.stringify('production'),
        ),
        commonjs(),
        typescript(
          tsconfig: 'tsconfig.json',
          sourceMap: true,
          inlineSources: true,
        ),
        css( output: 'dist/style.css' ),
      ],
    ;
  );

这将在dist 文件夹中输出index.js 和style.css

如果您不使用 TypeScript，只需从示例中删除 typescript 导入和插件。