web-dev-qa-db-ja.com

反応アプリをロールアップにバンドルする方法

最も単純な反応アプリを構築するためのロールアップ構成のヘルプを探しています。

現在、バンドルされているjsファイルには実際には依存関係がバンドルされておらず、かなり裸のように見えます。

レポから再現

ロールアップ構成ファイル

バンドルされたJSファイル

私のロールアップ構成：

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

誰かがこれに遭遇した場合：ここに私の作業ロールアップ設定があります。

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依存関係が外部であると想定していました。これはコンポーネントライブラリでは正しいですが、スタンドアロンアプリでは正しくありません。マイナーな問題と名前付きインポートのマッピングも修正する必要がありました。

これが誰かの時間を節約することを願っています。

21
Diana Suvorova