webpack/utils.js - master - githubmirror/commcare-hq

webpack/utils.js
160 строк6 KB
Biyeun Buczyk
rename webpack_main to js_entry
03 окт 2024, 20:34
03 окт 2024, 20:347cc596c
/* eslint-env node */
const path = require("path");
const appPaths = require("./appPaths");
const fs = require("fs");

const __BASE = path.resolve(__dirname, '..');
const SETTINGS_FILE = path.join(appPaths.BUILD_ARTIFACTS_DIR, 'settings.json');
const DETAILS_FILE = path.join(appPaths.BUILD_ARTIFACTS_DIR, 'details.json');

const fetchJsonDataOrDefault = function (filePath, defaultData) {
    let fetchedData = defaultData;
    if (fs.existsSync(filePath)) {
        const content = fs.readFileSync(filePath, 'utf-8');
        fetchedData = JSON.parse(content);
    }
    return fetchedData;
};

// Note: This is taken from `details.json`, which is generated by
// `node webpack/generateDetails.js`. This script is always run prior to the webpack
// build as part of `yarn dev` or `yarn build`.
const DETAILS = fetchJsonDataOrDefault(DETAILS_FILE, {});

// Note: `settings.json` can be generated by `./manage.py generate_webpack_settings`
// if you have a custom `STATIC_ROOT` set in `localsettings.py`. Otherwise, the
// default configuration is fine.
const SETTINGS = fetchJsonDataOrDefault(SETTINGS_FILE, {
    staticfilesPath: path.resolve(__BASE, 'staticfiles'),
});

const WEBPACK_PATH = path.join(SETTINGS.staticfilesPath, 'webpack');
const WEBPACK_B3_PATH = path.join(SETTINGS.staticfilesPath, 'webpack_b3');

const getStaticFolderForApp = function (appName) {
    /**
     * Returns the full path to an application's static folder.
     * eg /path/to/corehq/apps/hqwebapp/static
     *
     * The full path for the application is obtained from `details.json`,
     * which is generated by `node webpack/generateDetails.js`. This script is always
     * run prior to the webpack build as part of `yarn dev` or `yarn build`
     *
     * @type {string}
     */
    const appPath = DETAILS.allAppPaths[appName];
    if (!appPath) {
        console.warn(`No path found for ${appName}`);
    }
    return path.join(appPath, 'static');
};

const getStaticPathForApp = function (appName, directory) {
    /**
     * A quick utility for generating full paths to directories within
     * an app's static folder.
     *
     * Given an appName like `hqwebapp` and a directory like `hqwebapp/js`,
     * this returns the full path to that static files directory
     * /path/to/corehq/apps/hqwebapp/static/hqwebapp/js
     *
     * @type {string}
     */
    directory = directory || "";
    const staticFolder = getStaticFolderForApp(appName);
    return path.resolve(staticFolder, appName, directory);
};

const getEntries = function (otherEntry) {
    /**
     * Entries in Webpack are also referred to as "modules". These
     * entries are determined by the `js_entry` or `js_entry_b3` template
     * tags in `hq_shared_tags.py`
     *
     * For instance, {% js_entry `hqwebapp/js/some_page` %}
     * Where the entry then looks something like:
     * ```
     * "hqwebapp/js/some_page": {
     *     import: '/path/to/corehq/apps/hqwebapp/static/hqwebapp/js/some_page.js',
     *     // the path of the output file that will live in `staticfiles/webpack`
     *     filename: 'hqwebapp/js/some_page.js`,
     * }
     * ```
     *
     * The entries within `DETAILS` are taken from `details.json`, which is generated
     * by `node webpack/generateDetails.js`. This script is always run prior to the webpack
     * build as part of `yarn dev` or `yarn build`
     *
     * @type {{b3: {}}}
     */
    const otherEntries = {
        'b3': DETAILS.b3Entries,
    };
    return otherEntries[otherEntry] || DETAILS.entries;
};

const getAllAliases = function (aliases) {
    return Object.assign(aliases, DETAILS.aliases);
};

const getCacheGroups = function () {
    /**
     * Cache Groups are effectively parent "modules" containing shared code
     * amongst the generated entries. There is a common chunk to contain the most widely
     * shared code across the codebase, a vendor chunk which includes code from npm dependencies
     * that changes less frequently than code within the codebase. Lastly, there are chunks
     * for commonly shared code (if needed, based on size requirements) within each app.
     *
     * Cache Groups are "modules" of shared code across different entries that can be
     * cached by the browser so the unique code for a particular entry point can be condensed.
     * Subsequent loads of pages within HQ or pages within a particular app of HQ can rely
     * on reading the cache of this common code rather than requesting an enormous entry
     * point file each time.
     *
     * See Webpack's documentation to learn more about Code Splitting and Cache Groups:
     * https://webpack.js.org/plugins/split-chunks-plugin/
     *
     * `appsWithEntries` from `DETAILS` is taken from `details.json`, which is generated
     * by `node webpack/generateDetails.js`. This script is always run prior to the webpack
     * build as part of `yarn dev` or `yarn build`.
     *
     * @type {dict} - a dict of cache group definitions
     */
    const cacheGroups = {
        common: {
            name: 'common',
            chunks: 'all',
            minChunks: 2,
            priority: 2,  // if two cache groups might share a module, prioritize loading into common
        },
        vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all',
            priority: 2,
        },
    };

    DETAILS.appsWithEntries.forEach(appName => {
        const testExp = new RegExp("[\\\\/]" + appName + "[\\\\/]js[\\\\/]");
        cacheGroups[appName] = {
            test: testExp,
            name: `${appName}/${appName}.bundle`,
            chunks: 'all',
            minChunks: 1,
            // hqwebapp shares the highest priority among the modules
            priority: (appName === 'hqwebapp') ? 1 : 0,
        };
    });
    return cacheGroups;
};

module.exports = {
    WEBPACK_PATH: WEBPACK_PATH,
    WEBPACK_B3_PATH: WEBPACK_B3_PATH,
    getStaticFolderForApp: getStaticFolderForApp,
    getStaticPathForApp: getStaticPathForApp,
    getEntries: getEntries,
    getAllAliases: getAllAliases,
    getCacheGroups: getCacheGroups,
};