Skip to content

Instantly share code, notes, and snippets.

@gilesdring

gilesdring/Configuring Rollup.js for React.md

Last active May 16, 2019 14:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gilesdring/8c73ca48086824e9aae48c2bd067e87c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gilesdring/8c73ca48086824e9aae48c2bd067e87c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. gilesdring revised this gist May 16, 2019. 1 changed file with 8 additions and 4 deletions.
    12 changes: 8 additions & 4 deletions rollup.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,9 @@
    import replace from 'rollup-plugin-replace';
    import babel from 'rollup-plugin-babel';
    import resolve from 'rollup-plugin-node-resolve';
    import commonjs from 'rollup-plugin-commonjs';
    import babel from 'rollup-plugin-babel';
    import copy from 'rollup-plugin-copy';
    import { uglify } from 'rollup-plugin-uglify';
    import copy from 'rollup-plugin-copy';

    const targetDir = 'public/js';

    @@ -49,11 +49,15 @@ const jsPlugins = [
    export default [
    {
    input: 'src/main.js',
    plugins: jsPlugins,
    external: ['react', 'react-dom'],
    output: {
    dir: targetDir,
    format: 'iife',
    globals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    },
    },
    plugins: jsPlugins,
    external: ['react', 'react-dom'],
    },
    ];
  2. gilesdring revised this gist May 16, 2019. 2 changed files with 24 additions and 15 deletions.
    4 changes: 2 additions & 2 deletions Configuring Rollup.js for React.md
    View file
    Original file line number Diff line number Diff line change
    @@ -20,5 +20,5 @@ Add the following `npm` scripts:
    "build:rollup": "rollup --config",
    ```

    If you run this with `NODE_ENV=production` (or in fact anything other than `development`, which is the default), the resulting
    code will be minified.
    If you run this with `NODE_ENV=production` (or in fact anything other than `development`), the resulting
    code will be minified. The target defaults to `production`.
    35 changes: 22 additions & 13 deletions rollup.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,43 +5,52 @@ import babel from 'rollup-plugin-babel';
    import copy from 'rollup-plugin-copy';
    import { uglify } from 'rollup-plugin-uglify';

    const NODE_ENV = process.env.NODE_ENV || 'development';
    const targetDir = 'public/js';

    const isDev = (NODE_ENV === 'development');
    // Grab the NODE_ENV and store in targetEnv, default to 'production' if undefined
    const { NODE_ENV: targetEnv = 'production' } = process.env;

    // Work out if we're targetting development
    const isDev = (targetEnv === 'development');

    // Define baseline plugins for transformation
    const jsPlugins = [
    replace({
    'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
    'process.env.NODE_ENV': JSON.stringify(targetEnv),
    }),
    babel({
    configFile: false,
    runtimeHelpers: true,
    exclude: 'node_modules/**', // only transpile our source code
    presets: [
    ['@babel/env', { modules: false }],
    configFile: false, // Read config from here, not babel config file
    runtimeHelpers: true, // Include runtime Helpers
    exclude: 'node_modules/**', // Only transpile our source code
    presets: [ // Setup presets
    ['@babel/env', {
    modules: false
    }],
    ['@babel/react', {}],
    ],
    plugins: ['@babel/transform-runtime'],
    plugins: [ // Setup plugins
    '@babel/transform-runtime'
    ],
    }),
    resolve(),
    commonjs(),
    isDev || uglify(),
    copy({
    isDev || uglify(), // Uglify code unless we're targetting 'development'
    copy({ // Copy modules to the vendor directory
    targets: [
    'node_modules/react/umd/react.development.js',
    'node_modules/react/umd/react.production.min.js',
    'node_modules/react-dom/umd/react-dom.development.js',
    'node_modules/react-dom/umd/react-dom.production.min.js',
    ],
    outputFolder: 'public/js/vendor',
    outputFolder: `${targetDir}/vendor`,
    }),
    ];

    export default [
    {
    input: 'src/main.js',
    output: {
    dir: 'public/js',
    dir: targetDir,
    format: 'iife',
    },
    plugins: jsPlugins,
  3. gilesdring renamed this gist May 16, 2019. 1 changed file with 0 additions and 0 deletions.
    0 README.md → Configuring Rollup.js for React.md
    View file
    File renamed without changes.
  4. gilesdring created this gist May 16, 2019.
    24 changes: 24 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    Install required Rollup stuffs

    ```
    npm install --save-dev rollup rollup-plugin-babel rollup-plugin-commonjs \
    rollup-plugin-copy rollup-plugin-node-resolve rollup-plugin-replace \
    rollup-plugin-uglify
    ```

    Install required Babel stuffs

    ```
    npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/runtime
    ```

    Create the `rollup.config.js` file as defined below.

    Add the following `npm` scripts:

    ```
    "build:rollup": "rollup --config",
    ```

    If you run this with `NODE_ENV=production` (or in fact anything other than `development`, which is the default), the resulting
    code will be minified.
    50 changes: 50 additions & 0 deletions rollup.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    import replace from 'rollup-plugin-replace';
    import resolve from 'rollup-plugin-node-resolve';
    import commonjs from 'rollup-plugin-commonjs';
    import babel from 'rollup-plugin-babel';
    import copy from 'rollup-plugin-copy';
    import { uglify } from 'rollup-plugin-uglify';

    const NODE_ENV = process.env.NODE_ENV || 'development';

    const isDev = (NODE_ENV === 'development');

    const jsPlugins = [
    replace({
    'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
    }),
    babel({
    configFile: false,
    runtimeHelpers: true,
    exclude: 'node_modules/**', // only transpile our source code
    presets: [
    ['@babel/env', { modules: false }],
    ['@babel/react', {}],
    ],
    plugins: ['@babel/transform-runtime'],
    }),
    resolve(),
    commonjs(),
    isDev || uglify(),
    copy({
    targets: [
    'node_modules/react/umd/react.development.js',
    'node_modules/react/umd/react.production.min.js',
    'node_modules/react-dom/umd/react-dom.development.js',
    'node_modules/react-dom/umd/react-dom.production.min.js',
    ],
    outputFolder: 'public/js/vendor',
    }),
    ];

    export default [
    {
    input: 'src/main.js',
    output: {
    dir: 'public/js',
    format: 'iife',
    },
    plugins: jsPlugins,
    external: ['react', 'react-dom'],
    },
    ];