From 159fdfe7ad1059985eca0109f46251f13da868de Mon Sep 17 00:00:00 2001 From: gconsidine Date: Thu, 21 Sep 2017 15:52:19 -0400 Subject: [PATCH] Fix how global dependencies are loaded in the UI The UI has a handful of dependencies attached to window (angular, jquery, lodash, etc). In the case of schedules, jquery was included and extended as expected, but then clobbered by another module. This prevented the Select2 dependency from working as expected. Rather than relying on webpack to export particular dependencies as global, that work is done in the vendor entry point now instead. --- awx/ui/build/webpack.base.js | 30 +++++++---------------------- awx/ui/build/webpack.development.js | 2 +- awx/ui/build/webpack.production.js | 8 +------- awx/ui/client/src/vendor.js | 16 +++++++++++++-- awx/ui/package.json | 2 -- 5 files changed, 23 insertions(+), 35 deletions(-) diff --git a/awx/ui/build/webpack.base.js b/awx/ui/build/webpack.base.js index dbdec3eafb..6a8c4ed781 100644 --- a/awx/ui/build/webpack.base.js +++ b/awx/ui/build/webpack.base.js @@ -49,7 +49,7 @@ const base = { chunks: false, excludeAssets: name => { const chunkNames = `(${CHUNKS.join('|')})`; - const outputPattern = new RegExp(`${chunkNames}\.[a-f0-9]+\.(js|css)$`, 'i'); + const outputPattern = new RegExp(`${chunkNames}\.[a-f0-9]+\.(js|css)(|\.map)$`, 'i'); return !outputPattern.test(name); } @@ -87,17 +87,6 @@ const base = { use: ['css-loader', 'less-loader'] }) }, - { - test: require.resolve('jquery'), - loader: 'expose-loader?$!expose-loader?jQuery!expose-loader?jquery' - }, - { - loader: 'script-loader', - test: [ - /node_modules\/javascript-detect-element-resize\/jquery.resize\.js$/, - /node_modules\/d3\/d3\.min.js$/ - ] - }, { test: /\.html$/, use: ['ngtemplate-loader', 'html-loader'], @@ -117,8 +106,7 @@ const base = { new webpack.ProvidePlugin({ jsyaml: 'js-yaml', CodeMirror: 'codemirror', - jsonlint: 'codemirror.jsonlint', - _: 'lodash' + jsonlint: 'codemirror.jsonlint' }), new ExtractTextPlugin('css/[name].[hash].css'), new CleanWebpackPlugin([STATIC_PATH, COVERAGE_PATH, LANGUAGES_PATH], { @@ -182,13 +170,7 @@ const base = { filename: INDEX_OUTPUT, inject: false, chunks: CHUNKS, - chunksSortMode: (chunk) => { - if (chunk.names[0] === 'polyfill' || chunk.names[0] === 'vendor') { - return -1; - } - - return 1; - } + chunksSortMode: chunk => chunk.names[0] === 'vendor' ? -1 : 1 }) ], resolve: { @@ -200,12 +182,14 @@ const base = { '~theme': THEME_PATH, '~modules': NODE_MODULES_PATH, '~assets': ASSETS_PATH, - d3$: '~modules/d3/d3.min.js', + 'd3$': '~modules/d3/d3.min.js', 'codemirror.jsonlint$': '~modules/codemirror/addon/lint/json-lint.js', + 'jquery': '~modules/jquery/dist/jquery.js', 'jquery-resize$': '~modules/javascript-detect-element-resize/jquery.resize.js', - select2$: '~modules/select2/dist/js/select2.full.min.js', + 'select2$': '~modules/select2/dist/js/select2.full.min.js', 'js-yaml$': '~modules/js-yaml/dist/js-yaml.min.js', 'lr-infinite-scroll$': '~modules/lr-infinite-scroll/lrInfiniteScroll.js', + 'angular-tz-extensions$': '~modules/angular-tz-extensions/lib/angular-tz-extensions.js', 'angular-ui-router$': '~modules/angular-ui-router/release/angular-ui-router.js', 'angular-ui-router-state-events$': '~modules/angular-ui-router/release/stateEvents.js', 'ng-toast-provider$': '~modules/ng-toast/src/scripts/provider.js', diff --git a/awx/ui/build/webpack.development.js b/awx/ui/build/webpack.development.js index 2d85a4bd7a..5e936c0a7e 100644 --- a/awx/ui/build/webpack.development.js +++ b/awx/ui/build/webpack.development.js @@ -5,7 +5,7 @@ const _ = require('lodash'); const base = require('./webpack.base'); const development = { - devtool: 'cheap-source-map' + devtool: 'source-map' }; module.exports = _.merge(base, development); diff --git a/awx/ui/build/webpack.production.js b/awx/ui/build/webpack.production.js index e709962765..feaa6d13f7 100644 --- a/awx/ui/build/webpack.production.js +++ b/awx/ui/build/webpack.production.js @@ -25,13 +25,7 @@ const production = { filename: INSTALL_RUNNING_OUTPUT, inject: false, chunks: CHUNKS, - chunksSortMode: (chunk) => { - if (chunk.names[0] === 'polyfill' || chunk.names[0] === 'vendor') { - return -1; - } - - return 1; - } + chunksSortMode: chunk => chunk.names[0] === 'vendor' ? -1 : 1 }) ] }; diff --git a/awx/ui/client/src/vendor.js b/awx/ui/client/src/vendor.js index 4af531a78f..11c361d314 100644 --- a/awx/ui/client/src/vendor.js +++ b/awx/ui/client/src/vendor.js @@ -1,3 +1,4 @@ +// Theme require('~assets/custom-theme/jquery-ui-1.10.3.custom.min.css'); require('~assets/ansible-bootstrap.min.css'); require('~assets/fontcustom/fontcustom.css'); @@ -9,17 +10,28 @@ require('~modules/codemirror/addon/lint/lint.css'); require('~modules/nvd3/build/nv.d3.css'); require('~modules/ng-toast/dist/ngToast.min.css'); -require('jquery'); +// jQuery + extensions +global.jQuery = require('jquery'); +global.jquery = global.jQuery; +global.$ = global.jQuery; require('jquery-resize'); require('jquery-ui'); require('bootstrap'); require('bootstrap-datepicker'); -require('moment'); require('select2'); + +// Standalone libs +global._ = require('lodash'); +require('moment'); +require('rrule'); require('sprintf-js'); require('reconnectingwebsocket'); + +// D3 + extensions require('d3'); require('nvd3'); + +// Angular require('angular'); require('angular-cookies'); require('angular-sanitize'); diff --git a/awx/ui/package.json b/awx/ui/package.json index f79ca4aa32..a5f520ece7 100644 --- a/awx/ui/package.json +++ b/awx/ui/package.json @@ -47,7 +47,6 @@ "eslint-import-resolver-webpack": "^0.8.3", "eslint-loader": "^1.9.0", "eslint-plugin-import": "^2.7.0", - "expose-loader": "^0.7.3", "extract-text-webpack-plugin": "^3.0.0", "grunt": "^1.0.1", "grunt-angular-gettext": "^2.2.3", @@ -60,7 +59,6 @@ "html-webpack-plugin": "^2.30.1", "jasmine-core": "^2.5.2", "jshint": "^2.9.4", - "jshint-loader": "^0.8.3", "jshint-stylish": "^2.2.0", "json-loader": "^0.5.4", "karma": "^1.4.1",