diff --git a/static/js/bundles/common.js b/static/js/bundles/common.js index 19a312cc59..39a2cdb70d 100644 --- a/static/js/bundles/common.js +++ b/static/js/bundles/common.js @@ -1,7 +1,7 @@ import "core-js/features/promise"; import "core-js/features/symbol"; import "../../../tools/debug-require"; -import "jquery/dist/jquery.js"; +import "jquery"; import "../page_params.js"; import "../csrf.js"; import "../blueslip.js"; diff --git a/tools/debug-require-webpack-plugin.ts b/tools/debug-require-webpack-plugin.ts index be37ba60b8..bdb7c389c0 100644 --- a/tools/debug-require-webpack-plugin.ts +++ b/tools/debug-require-webpack-plugin.ts @@ -46,7 +46,7 @@ export default class DebugRequirePlugin { resolver.resolve( {}, __dirname, - "./debug-require.js", + "./debug-require", {}, (err?: Error, result?: string) => (err ? reject(err) : resolve(result)), ), diff --git a/tools/webpack-helpers.ts b/tools/webpack-helpers.ts index 74f13dcfb0..5cd173b00d 100644 --- a/tools/webpack-helpers.ts +++ b/tools/webpack-helpers.ts @@ -1,6 +1,6 @@ -import {basename, resolve} from "path"; +import {resolve} from "path"; -import {RuleSetRule, RuleSetUseItem} from "webpack"; +import {RuleSetUseItem} from "webpack"; export const cacheLoader: RuleSetUseItem = { loader: "cache-loader", @@ -8,37 +8,3 @@ export const cacheLoader: RuleSetUseItem = { cacheDirectory: resolve(__dirname, "../var/webpack-cache"), }, }; - -/* Return expose-loader format to the config - For example - [ - // Exposes 'my_module' as the name - {path: './folder/my_module.js'}, - - // Exposes 'my_custom_name' - {path: './folder/my_module.js', name: 'my_custom_name'}, - - // Exposes 'name1' and 'name2' - {path: './folder/my_module.js', name: ['name1', 'name2']} - ] -*/ -interface ExportLoaderOptions { - path: string; - name?: string | string[]; -} - -export function getExposeLoaders(optionsArr: ExportLoaderOptions[]): RuleSetRule[] { - return optionsArr.map(({path, name}) => ({ - test: require.resolve(path), - use: [ - cacheLoader, - { - loader: "expose-loader", - options: { - // If no name is provided, infer it - exposes: name ?? basename(path, ".js"), - }, - }, - ], - })); -} diff --git a/tools/webpack.config.ts b/tools/webpack.config.ts index abd1e5ac60..3f9308d0cc 100644 --- a/tools/webpack.config.ts +++ b/tools/webpack.config.ts @@ -12,7 +12,7 @@ import _webpackDevServer from "webpack-dev-server"; import BundleTracker from "webpack4-bundle-tracker"; import DebugRequirePlugin from "./debug-require-webpack-plugin"; -import {cacheLoader, getExposeLoaders} from "./webpack-helpers"; +import {cacheLoader} from "./webpack-helpers"; import assets from "./webpack.assets.json"; export default (env?: string): webpack.Configuration[] => { @@ -24,6 +24,16 @@ export default (env?: string): webpack.Configuration[] => { entry: assets, module: { rules: [ + { + test: require.resolve("./debug-require"), + loader: "expose-loader", + options: {exposes: "require"}, + }, + { + test: require.resolve("jquery"), + loader: "expose-loader", + options: {exposes: ["$", "jQuery"]}, + }, // Generate webfont { test: /\.font\.js$/, @@ -239,15 +249,6 @@ export default (env?: string): webpack.Configuration[] => { ], }; - // Expose Global variables for third party libraries to webpack modules - // Use the unminified version of jquery so that - // Good error messages show up in production and development in the source maps - const exposeOptions = [ - {path: "./debug-require.js", name: "require"}, - {path: "jquery/dist/jquery.js", name: ["$", "jQuery"]}, - ]; - config.module!.rules.unshift(...getExposeLoaders(exposeOptions)); - if (!production) { // Out JS debugging tools for (const paths of Object.values(assets)) {