Przeglądaj źródła

HUE-5725 [core] Add webpack

This commit adds webpack to Hue.

1. The main cui.js is an ES6 file.
* This file imports and exposes the relevant cui objects via the window object.
* This file imports jquery, knockout and knockout mapping and expose them as well.
* This file performs singleLoader.applyBindings() because Hue doesn't have a single applyBindings
  at the document.body level.

The overall size is about 250K, which is on par with adding jquery, ko, ko mapping and _ together.

At the end, I provided a call in responsive.mako to illustrate how to make relevant cui api calls.
Andrew Yao 8 lat temu
rodzic
commit
33e78a3

Plik diff jest za duży
+ 354 - 0
desktop/core/src/desktop/static/desktop/css/cui.css


+ 22 - 0
desktop/core/src/desktop/static/desktop/js/cui.js

@@ -0,0 +1,22 @@
+var locale = 'en-US';
+
+import $ from 'jquery';
+import ko from 'knockout';
+import komapping from 'komapping';
+import singletonLoader from 'ko/components/singletonLoader';
+import commonMessages from 'ko/components/commonMessages';
+import commonModals from 'ko/components/commonModals';
+import i18n         from 'utils/i18n';
+
+var cuiResources = require('cloudera-ui/locales/' + locale);
+
+i18n.extend(cuiResources);
+
+// This is only need for apps that don't do applyBindings at the body level.
+singletonLoader.applyBindings();
+
+window.$ = $;
+window.ko = ko;
+window.ko.mapping = komapping;
+window.commonMessages = commonMessages;
+window.commonModals = commonModals;

+ 5 - 3
desktop/core/src/desktop/templates/responsive.mako

@@ -46,7 +46,10 @@
 
   <link href="${ static('desktop/ext/css/font-awesome.min.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/hue.css') }" rel="stylesheet">
+  <link href="${ static('desktop/css/bootstrap2.css') }" rel="stylesheet">
+  <link href="${ static('desktop/css/bootstrap-responsive2.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/jquery-ui.css') }" rel="stylesheet">
+  <link href="${ static('desktop/css/cui.css') }" rel="stylesheet">
 
   ${ commonHeaderFooterComponents.header_i18n_redirection(user, is_s3_enabled, apps) }
 </head>
@@ -440,7 +443,8 @@ ${ hueIcons.symbols() }
 </div>
 
 
-<script src="${ static('desktop/ext/js/jquery/jquery-2.2.3.min.js') }"></script>
+<script src="${ static('desktop/js/cui-bundle.js') }"></script>
+
 <script src="${ static('desktop/js/jquery.migration.js') }"></script>
 <script src="${ static('desktop/js/hue.utils.js') }"></script>
 <script src="${ static('desktop/ext/js/bootstrap.min.js') }"></script>
@@ -477,11 +481,9 @@ ${ hueIcons.symbols() }
   window.d3v3 = d3;
 </script>
 
-<script src="${ static('desktop/ext/js/knockout.min.js') }"></script>
 <script src="${ static('desktop/js/hue.colors.js') }"></script>
 <script src="${ static('desktop/js/apiHelper.js') }"></script>
 <script src="${ static('desktop/js/ko.charts.js') }"></script>
-<script src="${ static('desktop/ext/js/knockout-mapping.min.js') }"></script>
 <script src="${ static('desktop/ext/js/knockout-sortable.min.js') }"></script>
 <script src="${ static('desktop/ext/js/knockout.validation.min.js') }"></script>
 <script src="${ static('desktop/js/ko.editable.js') }"></script>

+ 19 - 3
package.json

@@ -19,18 +19,34 @@
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "less": "2.6.1"
+    "bootstrap": "3.3.6",
+    "dompurify": "0.8.2",
+    "jquery": "2.1.1",
+    "knockout": "3.4.0",
+    "knockout.mapping": "2.4.3",
+    "less": "2.6.1",
+    "lodash": "3.10.1",
+    "pubsub.js": "1.4.3"
   },
   "devDependencies": {
+    "babel-core": "6.22.1",
+    "babel-jscs": "3.0.0-beta1",
+    "babel-loader": "6.2.5",
+    "babel-plugin-transform-es2015-modules-amd": "6.8.0",
+    "babel-plugin-transform-strict-mode": "6.6.5",
+    "babel-preset-es2015": "6.6.0",
+    "expose-loader": "0.7.1",
     "grunt": "0.4.5",
     "grunt-contrib-less": "1.3.0",
     "grunt-contrib-watch": "0.6.1",
-    "load-grunt-tasks": "3.1.0"
+    "load-grunt-tasks": "3.1.0",
+    "webpack": "1.13.1"
   },
   "scripts": {
     "devinstall": "npm cache clean && npm install && npm prune",
     "less": "./node_modules/.bin/grunt less",
-    "watch": "./node_modules/.bin/grunt watch"
+    "watch": "./node_modules/.bin/grunt watch",
+    "webpack": "./node_modules/.bin/webpack"
   },
   "files": []
 }

+ 84 - 0
webpack.config.js

@@ -0,0 +1,84 @@
+var fs  = require('fs');
+var webpack = require('webpack');
+var path = require('path');
+
+var jqueryShim = new webpack.ProvidePlugin({
+  $: 'jquery',
+  jQuery: 'jquery',
+  'window.jQuery': 'jquery'
+});
+
+var PROD = JSON.parse(process.env.PROD_ENV || '0');
+
+var plugins = [];
+
+if (PROD) {
+  plugins.push(new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }));
+}
+
+// Note that since we are using 'npm install' and stopped using --legacy-bundling,
+// we are not ensured which version is installed and where. We will try cloudera-ui
+// first, and if it is not there we will let 'require' resolve it. The latter means
+// that a version compatible with cloudera-ui and other libraries was installed at the
+// top of the node_modules directory.
+var lodashDir = path.resolve('node_modules/lodash');
+if (!fs.exists(lodashDir)) {
+  lodashDir = require.resolve('lodash');
+}
+
+module.exports = {
+  devtool: 'source-map',
+  progress: true,
+  host: '0.0.0.0',
+  port: '8080',
+  resolve: {
+    extensions: ['', '.json', '.jsx', '.js'],
+
+    modulesDirectories: [
+      'node_modules',
+      'js',
+      'desktop/core/src/desktop/static/desktop/js/cui'
+    ],
+    alias: {
+      // any bootstrap modules should really resolve to node_modules/bootstrap/js
+      bootstrap: 'bootstrap/js',
+      'cloudera-ui': 'cui',
+      _: 'lodash',
+      komapping: 'knockout.mapping',
+      'query-command-supported': 'query-command-supported/src/queryCommandSupported',
+      pubsub: 'pubsub.js/pubsub'
+    }
+  },
+  entry: {
+    cui: ['./desktop/core/src/desktop/static/desktop/js/cui.js']
+  },
+  output: {
+    path: './desktop/core/src/desktop/static/desktop/js',
+    filename: 'cui-bundle.js'
+  },
+  module: {
+    loaders: [
+      { test: /\.(html)$/, loader: 'html?interpolate&removeComments=false' },
+      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
+      { test: /\.css$/, loader: 'style-loader!css-loader' },
+      { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'file-loader' },
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        query: {
+          presets: ['es2015']
+        }
+      },
+
+      // expose lodash and jquery for knockout templates to access
+      { test: /lodash$/, loader: 'expose?_' },
+      { test: /jquery/, loader: 'expose?$!expose?jQuery' },
+
+      // needed for moment-timezone
+      { include: /\.json$/, loaders: ['json-loader'] }
+    ]
+  },
+
+  plugins: plugins
+};

Niektóre pliki nie zostały wyświetlone z powodu dużej ilości zmienionych plików