feat(umd): fix external libraries being bundled with main UMD file an…

…d improve related docs
tinesoft · Jan 30, 2018 · f25e037 · f25e037
1 parent 1200ea7
commit f25e037
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 19 deletions.
diff --git a/app/templates/_gulpfile.js b/app/templates/_gulpfile.js
@@ -362,6 +362,10 @@ gulp.task('rollup-bundle', (cb) => {
     const es5Input = path.join(es5OutputFolder, `<%= ngVersion === '2.0.0' ? 'index.js' : '${config.unscopedLibraryName}.js' %>`);<% if(ngVersionMin >= 4) { %>
     const es2015Input = path.join(es2015OutputFolder, `${config.unscopedLibraryName}.js`);<% } %>
     const globals = {
+      // The key here is library name, and the value is the name of the global variable name
+      // the window object.
+      // See https://github.com/rollup/rollup/wiki/JavaScript-API#globals for more.
+
       // Angular dependencies <% for (ngModule of ngModules) { %>
       '@angular/<%= ngModule %>': 'ng.<%= ngModule %>',<% } %>
 
@@ -389,57 +393,75 @@ gulp.task('rollup-bundle', (cb) => {
       // ATTENTION:
       // Add any other dependency or peer dependency of your library here
       // This is required for UMD bundle users.
-      <%- otherDependencies.map(d => `'${d}': '${d}'`).join(',\n      ') %>
+      // See for more See https://github.com/tinesoft/generator-ngx-library/TROUBLESHOUTING.md
+      <%- otherDependencies.map(d => `'${d}': _.camelCase('${d}'.replace('/','.'))`).join(',\n      ') %>
+
     };
     const rollupBaseConfig = {
-      name: _.camelCase(config.libraryName),
-      sourcemap: true,
-      globals: globals,
+      output:{
+        name: _.camelCase(config.libraryName),
+        sourcemap: true,
+        globals: globals
+      },
+      // List of dependencies
+      // See https://github.com/rollup/rollup/wiki/JavaScript-API#external for more.
       external: Object.keys(globals),
       plugins: [
         rollupCommonjs({
           include: ['node_modules/rxjs/**']
         }),
         rollupSourcemaps(),
-        rollupNodeResolve({ jsnext: true, module: true })
+        rollupNodeResolve({ 
+          jsnext: true, 
+          module: true,
+          jail: distFolder, // to use final 'package.json' from 'dist/'
+         })
       ]
     };
 
     // UMD bundle.
-    const umdConfig = Object.assign({}, rollupBaseConfig, {
+    const umdConfig = _.merge({}, rollupBaseConfig, {
       input: es5Input,
-      file: path.join(distFolder, `bundles`, `${config.unscopedLibraryName}.umd.js`),
-      format: 'umd',
+      output: {
+        format: 'umd',
+        file: path.join(distFolder, `bundles`, `${config.unscopedLibraryName}.umd.js`)
+      }
     });
 
     // Minified UMD bundle.
-    const minifiedUmdConfig = Object.assign({}, rollupBaseConfig, {
+    const minifiedUmdConfig = _.merge({}, rollupBaseConfig, {
       input: es5Input,
-      file: path.join(distFolder, `bundles`, `${config.unscopedLibraryName}.umd.min.js`),
-      format: 'umd',
+      output: {
+        format: 'umd',
+        file: path.join(distFolder, `bundles`, `${config.unscopedLibraryName}.umd.min.js`),
+      },
       plugins: rollupBaseConfig.plugins.concat([rollupUglify({})])
     });<% if(ngVersionMin >= 4){ %>
 
     // ESM+ES5 flat module bundle.
-    const fesm5config = Object.assign({}, rollupBaseConfig, {
+    const fesm5config = _.merge({}, rollupBaseConfig, {
       input: es5Input,
-      file: path.join(distFolder,<% if(ngVersionMin >= 5){ %> 'esm5', `${config.unscopedLibraryName}.es5.js`<% } else {%> `${config.libraryName}.es5.js`<% } %>),
-      format: 'es'
+      output: {
+        format: 'es',
+        file: path.join(distFolder,<% if(ngVersionMin >= 5){ %> 'esm5', `${config.unscopedLibraryName}.es5.js`<% } else {%> `${config.libraryName}.es5.js`<% } %>),
+      }
     });
 
     // ESM+ES2015 flat module bundle.
-    const fesm2015config = Object.assign({}, rollupBaseConfig, {
+    const fesm2015config = _.merge({}, rollupBaseConfig, {
       input: es2015Input,
-      file: path.join(distFolder,<% if(ngVersionMin >= 5){ %> 'esm2015', `${config.unscopedLibraryName}.js`<% } else {%> `${config.libraryName}.js`<% } %>),
-      format: 'es'
+      output: {
+        format: 'es',
+        file: path.join(distFolder,<% if(ngVersionMin >= 5){ %> 'esm2015', `${config.unscopedLibraryName}.js`<% } else {%> `${config.libraryName}.js`<% } %>),
+      }
     });<% } %>
 
     const allBundles = [
       umdConfig,
       minifiedUmdConfig<% if(ngVersionMin >= 4){ %>,
       fesm5config,
       fesm2015config<% } %>
-    ].map(cfg => rollup.rollup(cfg).then(bundle => bundle.write(cfg)));
+    ].map(cfg => rollup.rollup(cfg).then(bundle => bundle.write(cfg.output)));
 
     return Promise.all(allBundles)
       .then(() => gulpUtil.log('All bundles generated successfully.'))

diff --git a/app/templates/_package.json b/app/templates/_package.json
@@ -50,6 +50,7 @@
     "jest": "22.0.4",
     "jest-preset-angular": "5.0.0",<% } %>
     "@types/node": "8.0.44",
+    "@types/lodash": "4.14.92",
     "angular-cli-ghpages": "0.5.1",
     "angular2-template-loader": "0.6.2",<% if(useCompodoc){%>
     "@compodoc/gulp-compodoc": "0.0.8",<% } %><% if(enforceNgGitCommitMsg){%>
@@ -73,7 +74,7 @@
     "rollup-plugin-uglify": "2.0.1",
     "rollup-plugin-sourcemaps": "0.4.2",
     "rollup-plugin-commonjs": "8.2.6",
-    "rollup-plugin-node-resolve": "3.0.0",
+    "rollup-plugin-node-resolve": "3.0.2",
     "run-sequence": "2.2.0",<% if(!skipStyles) { %>
     "autoprefixer": "7.1.5",
     "cssnano": "3.10.0",
@@ -86,6 +87,7 @@
     "raw-loader": "0.5.1",
     "source-map-loader": "0.2.2",<% if(!skipTravis) {%>
     "travis-status": "2.0.0",<% } %>
+    "lodash": "4.17.4",
     "yargs": "10.0.3"
   },
   "engines": {