[WIP] Export modules for AMD consumption

webpack.config.js → app.webpack.config.js

@@ -4,6 +4,8 @@ require('es6-promise').polyfill();
 var _ = require('underscore');
 var path = require('path');
 var sourcemaps = 'inline-source-map';
+var webpack = require('webpack');
+
 
 if(process.argv.indexOf('-w') !== -1 || process.argv.indexOf('-w') !== -1  ){
   console.log('watch mode detected, will switch to cheep sourcemaps');
@@ -42,25 +44,24 @@ var commonConfig = {
       bootstrap: '$',
       bootstraptour: 'Tour',
       'jquery-ui': '$',
-      typeahead: '$.typeahead',
-      'codemirror': 'CodeMirror',
-      'codemirror/lib/codemirror': 'CodeMirror',
-      'codemirror/mode/meta': 'CodeMirror',
-      // Account for relative paths from other CodeMirror files
-      '../../lib/codemirror': 'CodeMirror',
-      '../lib/codemirror': 'CodeMirror' 
+      typeahead: '$.typeahead'
     }
 };
 
 function buildConfig(appName) {
     if (typeof appName !== 'string') return appName;
+    var outputPath = path.join(__dirname, 'notebook', 'static', appName, 'js', 'built')
     return _.extend({}, commonConfig, {
         entry: './notebook/static/' + appName + '/js/main.js',
         output: {
             filename: 'main.min.js',
-            path: path.join(__dirname, 'notebook', 'static', appName, 'js', 'built')
+            path: outputPath
         },
         devtool: sourcemaps,
+        plugins: [new webpack.DllReferencePlugin({
+            context: '.',
+            manifest: require(outputPath + '/vendor-manifest.json'),
+        })]
     });
 }
 

notebook/templates/edit.html

@@ -97,5 +97,7 @@
 
     {{super()}}
 
+<script src="{{ static_url("edit/js/built/vendor.min.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("edit/js/built/shim.bundle.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("edit/js/built/main.min.js") }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}

notebook/templates/notebook.html

@@ -358,6 +358,8 @@
 
 <script src="{{ static_url("components/text-encoding/lib/encoding.js") }}" charset="utf-8"></script>
 
+<script src="{{ static_url("notebook/js/built/vendor.min.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/built/shim.bundle.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("notebook/js/built/main.min.js") }}" type="text/javascript" charset="utf-8"></script>
 
 {% endblock %}

notebook/templates/page.html

@@ -21,8 +21,6 @@
     <script src="{{static_url("components/bootstrap/js/bootstrap.min.js") }}" type="text/javascript" charset="utf-8"></script> <!-- extends window.$ -->
     <script src="{{static_url("components/bootstrap-tour/build/js/bootstrap-tour.min.js") }}" type="text/javascript" charset="utf-8"></script> <!-- window.Tour -->
     <script src="{{static_url("components/jquery-typeahead/dist/jquery.typeahead.min.js") }}" type="text/javascript" charset="utf-8"></script> <!-- extends window.$ -->
-    <script src="{{static_url("components/codemirror/lib/codemirror.js") }}" type="text/javascript" charset="utf-8"></script>
-    <script src="{{static_url("components/codemirror/mode/meta.js") }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{static_url("components/requirejs/require.js") }}" type="text/javascript" charset="utf-8"></script>
     <script>
       window['staticURL'] = "{{static_url("", include_version=False)}}";
@@ -39,7 +37,6 @@
             underscore : 'components/underscore/underscore-min',
             backbone : 'components/backbone/backbone-min',
             moment: 'components/moment/moment',
-            codemirror: 'components/codemirror',
 
             // Define aliases for requirejs webpack imports
             notebook: 'built/index',
@@ -180,18 +177,6 @@
           return window.$;
       });
 
-      define("codemirror/lib/codemirror", function () {
-          return window.CodeMirror;
-      });
-
-      define("codemirror/mode/meta", function () {
-          return window.CodeMirror;
-      });
-
-      define("CodeMirror", function () {
-          return window.CodeMirror;
-      });
-
     </script>
 
     {% block meta %}

notebook/templates/terminal.html

@@ -60,5 +60,7 @@
 
     {{super()}}
 
+<script src="{{ static_url("terminal/js/built/vendor.min.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("terminal/js/built/shim.bundle.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("terminal/js/built/main.min.js") }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}

notebook/templates/tree.html

@@ -181,5 +181,7 @@
     {{super()}}
 
 
+<script src="{{ static_url("tree/js/built/vendor.min.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("tree/js/built/shim.bundle.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("tree/js/built/main.min.js") }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}

package.json

@@ -17,7 +17,7 @@
     "build:css:ipython": "lessc --include-path=notebook/static notebook/static/style/ipython.less notebook/static/style/ipython.min.css",
     "build:css:style": "lessc --include-path=notebook/static notebook/static/style/style.less notebook/static/style/style.min.css",
     "build:css:watch": "./scripts/less-watch ./notebook/static",
-    "build:js": "webpack",
+    "build:js": "webpack --config vendor.webpack.config.js && webpack --config app.webpack.config.js && node scripts/makeShims.js",
     "build:js:watch": "npm run build:js -- --watch"
   },
   "devDependencies": {

scripts/makeShims.js

@@ -0,0 +1,39 @@
+var path = require('path');
+var fs = require('fs');
+
+
+/**
+ * Make a shim file for a built notebook bundle that re-exports
+ * each module to an AMD module.
+ *
+ * @param name (string) - The name of the output bundle.
+ */
+function makeShim(name) {
+    var manifest = require('../notebook/static/' + name + '/js/built/vendor-manifest.json');
+    var content = [];
+    for (var key in manifest.content) {
+        var num = String(manifest.content[key]);
+        if (path.extname(key) !== '.js') {
+            continue;
+        }
+        key = key.replace('./notebook/static/', '');
+        key = key.replace('./node_modules/', '');
+        key = key.replace('.js', '');
+        var line = 'define("' + key + '", function () { return ';
+        line += manifest.name + '(' + num + '); });'
+        content.push(line);
+    }
+    var outputPath = './notebook/static/' + name + '/js/built/shim.bundle.js';
+    fs.writeFileSync(outputPath, content.join('\n'));
+}
+
+
+[
+    'auth',
+    'edit',
+    'terminal',
+    'tree',
+    'notebook'
+    ].forEach(function (name) {
+        makeShim(name);
+    })

vendor.webpack.config.js

@@ -0,0 +1,100 @@
+// Support for Node 0.10
+// See https://github.com/webpack/css-loader/issues/144
+require('es6-promise').polyfill();
+var _ = require('underscore');
+var path = require('path');
+var sourcemaps = 'inline-source-map';
+var webpack = require('webpack');
+
+
+if(process.argv.indexOf('-w') !== -1 || process.argv.indexOf('-w') !== -1  ){
+  console.log('watch mode detected, will switch to cheep sourcemaps');
+  sourcemaps = 'eval-source-map';
+
+}
+var commonConfig = {
+    resolve: {
+        root: [
+            '.', /* allows npm packages to be loaded */
+            './notebook/static'
+        ].map(function(p) {return path.resolve(p);}),
+        modulesDirectories: [
+            "components", /* bower */
+            "node_modules" /* npm */
+        ]
+    },
+    bail: true,
+    module: {
+        loaders: [
+            { test: /\.js$/, exclude: /node_modules|\/notebook\/static\/component/, loader: "babel-loader"},
+            { test: /\.css$/, loader: "style-loader!css-loader" },
+            { test: /\.json$/, loader: "json-loader" },
+            // jquery-ui loads some images
+            { test: /\.(jpg|png|gif)$/, loader: "file" },
+            // required to load font-awesome
+            { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
+            { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
+            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/octet-stream" },
+            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
+            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=image/svg+xml" }
+        ]
+    },
+    externals: {
+      jquery: '$',
+      bootstrap: '$',
+      bootstraptour: 'Tour',
+      'jquery-ui': '$',
+      typeahead: '$.typeahead'
+    }
+};
+
+function buildConfig(appName) {
+    if (typeof appName !== 'string') return appName;
+    var outputPath = path.join(__dirname, 'notebook', 'static', appName, 'js', 'built')
+    return _.extend({}, commonConfig, {
+        entry: {
+            vendor: ['./notebook/static/' + appName + '/js/main.js']
+        },
+        output: {
+            filename: 'vendor.min.js',
+            path: outputPath,
+            libraryTarget: 'var',
+            library: 'vendor'
+        },
+        devtool: sourcemaps,
+        plugins: [new webpack.DllPlugin({
+            name: 'vendor',
+            path: outputPath + '/vendor-manifest.json'
+        })]
+    });
+}
+
+module.exports = [
+    'auth',
+    'edit',
+    'terminal',
+    'tree',
+    'notebook',
+    _.extend({}, commonConfig, {
+        entry: {
+            vendor: ['./notebook/static/services/contents.js'],
+        },
+        output: {
+            filename: 'vendor.js',
+            path: path.join(__dirname, 'notebook', 'static', 'services', 'built'),
+            libraryTarget: 'amd'
+        },
+        devtool: sourcemaps,
+    }),
+    _.extend({}, commonConfig, {
+        entry: {
+            vendor: ['./notebook/static/index.js'],
+        },
+        output: {
+            filename: 'vendor.js',
+            path: path.join(__dirname, 'notebook', 'static', 'built'),
+            libraryTarget: 'amd'
+        },
+        devtool: sourcemaps,
+    }),
+].map(buildConfig);