Drives

Question

I am working on an Angular2 project. I looked at Angular2 aot docs and I managed to create ngFactory files. I used rollup js as suggested in the docs. I have several non-es6 npm packages. I used the requirement to download non-es6 packages.

The documentation (angular2 and rollup) suggests using rollup-plugin-commonjs to combine non-es6 modules. The following is the folding configuration.

export default {
    entry: 'scripts/main.js',
    dest: 'build/app.js', // output a single application bundle
    sourceMap: true,
    format: 'iife',
    context: 'this',
    plugins: [

        nodeResolve(
            {
                jsnext: true,
                module: true,
            }
        ),
        commonjs({
            include: 'node_modules/**/**',
        })  ,

        uglify()
    ]
}

Run codeHide result

I have a commonjs plugin in place. But still browser errors like "require undefined". How can I combine non-es6 modules without the help of webpack / browsify . Please inform.

Answer 1

, , / . AoT , , commonjs, .

, ( Webpack 20s).

vendor.ts( , main.ts) - :

import * as _leaflet from 'leaflet/dist/leaflet'; //leaflet is installed via npm in this case.
...
export default {
    ...
    _leaflet
};

vendor.rollup.js, commonjs, :

commonjs({
    include: [
        helpers.root('node_modules', '**') //This is just a method to make an absolute path to node_modules. See Angular 2 webpack docs for that.
    ]
})

.

app.rollup.js( ).

export default {
    entry: 'src/main.ts',
    dest: 'bundles/app.js',
    format: 'iife',
    sourceMap: true,
    moduleName: 'app',
    plugins: [
        ...
    ],
    external: [
        'leaflet/leaflet'  //Yeah, you can rename it to have nicer looking imports.
    ],
    globals: {
        ...
        'leaflet/leaflet': 'vendor._leaflet'  //And map it to the correct global var here.
    }
};

, ,

import * as L from 'leaflet/leaflet';

: AoT, .