@alicloud/console-toolkit-plugin-react/lib/webpack/common.js

console toolkit plugin for base react app

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.common = void 0;
var path_1 = require("path");
var console_toolkit_shared_utils_1 = require("@alicloud/console-toolkit-shared-utils");
var rules_1 = require("./rules");
var html_1 = require("./plugins/html");
var progress_1 = require("./plugins/progress");
var skeleton_1 = require("./plugins/skeleton");
var analyzer_1 = require("./plugins/analyzer");
var htmlInject_1 = require("./plugins/htmlInject");
var moment_1 = require("./plugins/moment");
var defaultOptions = {
    cwd: process.cwd(),
    // 入口文件
    entry: './index.js',
    output: {
        filename: '[name].js',
        // 输出的打包文件
        path: 'build',
        // 项目输出路径
        publicPath: '/',
        // 对于热替换(HMR)是必须的，让 webpack 知道在哪里载入热更新的模块(chunk)
        chunkFilename: '[name].js',
        libraryTarget: 'umd',
    },
    disableBabelLoaderCache: true,
    disableReactHotLoader: false,
    htmlXmlMode: false,
    disableExtractText: false,
    useLegacyCssModules: false,
    babelPluginWindCherryPick: true,
    analyze: false,
    bail: false,
    status: {
        children: false
    },
};
var isRelativePath = function (path) { return /^[.a-zA-Z0-9]/i.test(path); };
var common = function (config, options, api) {
    if (options === void 0) { options = defaultOptions; }
    var cwd = options.cwd, _a = options.entry, entry = _a === void 0 ? './index.js' : _a, userOutput = options.output, bail = options.bail, status = options.status, disableReactHotLoader = options.disableReactHotLoader, babelInclude = options.babelInclude, babelExclude = options.babelExclude, babelPluginWindRc = options.babelPluginWindRc, babelPluginWindIntl = options.babelPluginWindIntl, babelUseBuiltIns = options.babelUseBuiltIns, disableExtractText = options.disableExtractText, noProgress = options.noProgress, disableHtml = options.disableHtml, disablePolyfill = options.disablePolyfill, experiment = options.experiment, htmlFileName = options.htmlFileName, useLegacyCssModules = options.useLegacyCssModules, cssCondition = options.condition, theme = options.theme, classNamePrefix = options.classNamePrefix, babelPluginWindCherryPick = options.babelPluginWindCherryPick, babel = options.babel, htmlXmlMode = options.htmlXmlMode, babelOption = options.babelOption, _b = options.analyze, analyze = _b === void 0 ? false : _b, _c = options.hashPrefix, hashPrefix = _c === void 0 ? '' : _c, _d = options.htmInject, htmInject = _d === void 0 ? true : _d, _e = options.disableAutoPrefixer, disableAutoPrefixer = _e === void 0 ? false : _e, _f = options.es5ImcompatibleVersions, es5ImcompatibleVersions = _f === void 0 ? false : _f, _g = options.es5IncompatibleVersions, es5IncompatibleVersions = _g === void 0 ? false : _g, moment = options.moment, reactRefresh = options.reactRefresh, postCssPlugins = options.postCssPlugins, _h = options.disableImportXConsoleCSS, disableImportXConsoleCSS = _h === void 0 ? false : _h, consoleOS = options.consoleOS, disableConsoleOS = options.disableConsoleOS, appId = options.appId, tailwindcss = options.tailwindcss, htmlScriptCORS = options.htmlScriptCORS;
    if (!cwd) {
        (0, console_toolkit_shared_utils_1.error)('can\'t not get cwd for webpack');
        (0, console_toolkit_shared_utils_1.exit)(1);
        return;
    }
    var src = (0, path_1.resolve)(cwd, 'src');
    // output
    var output = __assign(__assign({}, defaultOptions.output), userOutput);
    var outputPath = isRelativePath(output.path) ? (0, path_1.resolve)(cwd, output.path) : output.path;
    if (!disablePolyfill) {
        config
            .entry('index')
            .add(require.resolve('core-js'));
    }
    // entry
    config
        .context(src)
        .entry('index')
        .add(entry)
        .end()
        .output
        .filename(output.filename)
        .path(outputPath)
        .publicPath(output.publicPath)
        .chunkFilename(output.chunkFilename)
        .libraryTarget(output.libraryTarget)
        .end();
    config.resolve
        .extensions
        .merge(['.js', '.jsx']);
    // rules
    (0, rules_1.jsx)(config, {
        babel: babel,
        reactHotLoader: !disableReactHotLoader,
        reactCssModules: true,
        reactCssModulesContext: src,
        // 只有在构建的时候才开启转义，否则 .mjs 被转义后，会导致 ReactHotLoader 中兼容 esModule 的方法失效，抛出异常：module is not defined
        es5ImcompatibleVersions: (0, console_toolkit_shared_utils_1.getEnv)().isProd() && es5ImcompatibleVersions || es5IncompatibleVersions,
        exclude: babelExclude,
        include: babelInclude,
        windRc: babelPluginWindRc,
        useBuiltIns: babelUseBuiltIns,
        windIntl: babelPluginWindIntl,
        windCherryPick: babelPluginWindCherryPick,
        babelOption: babelOption,
        reactRefresh: reactRefresh,
    });
    var condition = 'stable';
    if (useLegacyCssModules) {
        condition = 'legacy';
    }
    else if (cssCondition) {
        condition = cssCondition;
    }
    (0, rules_1.style)(config, {
        cwd: cwd,
        shouldExtract: !disableExtractText,
        condition: condition,
        theme: theme,
        hashPrefix: hashPrefix,
        disableAutoPrefixer: disableAutoPrefixer,
        classNamePrefix: classNamePrefix,
        postCssPlugins: postCssPlugins,
        tailwindcss: tailwindcss,
        consoleOS: consoleOS,
        disableConsoleOS: disableConsoleOS,
        appId: appId,
    });
    (0, rules_1.file)(config, options);
    // plugins
    if (!disableHtml) {
        var htmlData = api.dispatchSync('getHtmlData');
        // generate index.html
        (0, html_1.htmlPlugin)(config, {
            minify: {
                removeComments: true,
                minifyCSS: true // 压缩内联css
            },
            template: htmlFileName ? htmlFileName : (0, path_1.resolve)(cwd, 'src/index.html'),
            inject: htmInject,
            scriptLoading: options.htmlScriptLoading ? options.htmlScriptLoading : 'block',
            // @ts-ignore
            templateParameters: function (compilation, assets, assetTags, options) {
                return {
                    compilation: compilation,
                    webpackConfig: compilation.options,
                    htmlWebpackPlugin: {
                        tags: assetTags,
                        files: assets,
                        options: options,
                    },
                    __dev__: (0, console_toolkit_shared_utils_1.getEnv)().isDev()
                };
            },
        });
        (0, htmlInject_1.htmlInjectPlugin)(config, {
            data: htmlData,
            htmlXmlMode: htmlXmlMode,
            cors: htmlScriptCORS,
        });
    }
    if (analyze && !(0, console_toolkit_shared_utils_1.getEnv)().isCloudBuild()) {
        (0, analyzer_1.analyzerPlugin)(config);
    }
    if (!disableHtml && experiment && experiment.skeleton) {
        (0, skeleton_1.skeletonPlugin)(config, experiment.skeleton);
    }
    if (!noProgress) {
        (0, progress_1.progressPlugin)(config);
    }
    // others
    if (status) {
        config.stats(status);
    }
    if (bail) {
        config.bail(bail);
    }
    if (!(moment === null || moment === void 0 ? void 0 : moment.disable)) {
        (0, moment_1.momentPlugin)(config);
    }
    if (disableImportXConsoleCSS) {
        config.resolve.alias
            .set('@alicloud/console-components/dist/xconsole.css', require.resolve('../../tpl/empty.css'))
            .set('@alicloud/console-components/dist/xconsole-dark-var.css', require.resolve('../../tpl/empty.css'))
            .set('@alicloud/console-components/dist/xconsole-dark-var-rc.css', require.resolve('../../tpl/empty.css'))
            .set('@alicloud/console-components/dist/xconsole-var-rc.css', require.resolve('../../tpl/empty.css'));
    }
};
exports.common = common;