web-dev-qa-db-fra.com

Comment regrouper l'application React avec le cumul

Je cherche de l'aide avec la configuration de rollup pour construire l'application de réaction la plus simple.

Actuellement, mon fichier js fourni ne regroupe pas vraiment de dépendance et semble assez nu.

Repo à repro

fichier de configuration du rollup

fichier JS fourni

Ma configuration de rollup:

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/**',
    }),
  ],
};
reactjsrollupjs
8
Diana Suvorova

Au cas où quelqu'un rencontrerait ceci: Voici mes configurations de rollup de travail.

J'ai également mis à jour démo 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'),
    }),
  ],
};

Mon problème d'origine supposait que la dépendance React était externe. Cela est correct pour les bibliothèques de composants, mais pas pour les applications autonomes. J'ai également dû résoudre quelques problèmes mineurs et nommer le mappage des importations.

J'espère que cela fera gagner du temps à quelqu'un.

21
Diana Suvorova