axios 项目下的rollup.config.js文件

const lib = require("./package.json");
const outputFileName = "axios";
const name = "axios";
const namedInput = "./index.js";
const defaultInput = "./lib/axios.js";

export default async () => {const year = new Date().getFullYear();const banner = `// Axios v${lib.version} Copyright (c) ${year} ${lib.author} and contributors`;return [// browser ESM bundle for CDN...buildConfig({input: namedInput, //'./index.js'output: {file: `dist/esm/${outputFileName}.js`, //outputFileName = 'axios;format: "esm", //-f, --format <format>   输出类型（amd、cjs、es、iife、umd、system）preferConst: true,exports: "named", //--exports <mode>    指定导出模式（auto、default、named、none）banner, //--banner <text>   在产物顶部插入的代码（位于包装器之外）},}),// Browser UMD bundle for CDN...buildConfig({input: defaultInput,es5: true,output: {file: `dist/${outputFileName}.js`,name,format: "umd",exports: "default",banner,},}),// Browser CJS bundle...buildConfig({input: defaultInput,es5: false,minifiedVersion: false,output: {file: `dist/browser/${name}.cjs`,name,format: "cjs",exports: "default",banner,},}),// Node.js commonjs bundle{input: defaultInput,output: {file: `dist/node/${name}.cjs`,format: "cjs",preferConst: true,exports: "default",banner,},plugins: [autoExternal(), resolve(), commonjs()],},];
};

buildConfig 函数

• 接收一个参数，返回一个数组

const buildConfig = ({es5,browser = true,minifiedVersion = true,alias,...config
}) => {// 输出的文件名称已经路径const { file } = config.output;// path.extname() 方法返回 path 的扩展名，即 path 的最后一部分中从最后一次出现的 .（句点）字符到字符串的结尾。const ext = path.extname(file);// path.basename() 方法返回 path 的最后一部分const basename = path.basename(file, ext);const extArr = ext.split(".");extArr.shift();const build = ({ minified }) => ({input: namedInput, // ./index.js...config,output: {...config.output,// path.dirname() 方法返回 path 的目录名file: `${path.dirname(file)}/${basename}.${(minified? ["min", ...extArr]: extArr).join(".")}`,},plugins: [aliasPlugin({entries: alias || [],}),json(),resolve({ browser }),commonjs(),minified && terser(),minified && bundleSize(),...(es5? [babel({babelHelpers: "bundled",presets: ["@babel/preset-env"],}),]: []),...(config.plugins || []),],});const configs = [build({ minified: false })];if (minifiedVersion) {configs.push(build({ minified: true }));}return configs;
};

umd 模块

UMD 是 AMD + CommonJS 的结合体，同时还兼容了 script 标签引入，对组件库或框架库来说，解决了以前一套代码无法多端使用的难题。UMD 模块可借助 Rollup 工具来完成。

dist\axios.js
dist\axios.js.map
dist\axios.min.js
dist\axios.min.js.map

(function (global, factory) {typeof exports === "object" && typeof module !== "undefined"? (module.exports = factory()): typeof define === "function" && define.amd? define(factory): ((global =typeof globalThis !== "undefined" ? globalThis : global || self),(global.axios = factory()));
})(this, function () {"use strict";var axios = createInstance(defaults$1);// Expose Axios class to allow class inheritanceaxios.Axios = Axios$1;// Expose Cancel & CancelTokenaxios.CanceledError = CanceledError;axios.CancelToken = CancelToken$1;axios.isCancel = isCancel;axios.VERSION = VERSION;axios.toFormData = toFormData;// Expose AxiosError classaxios.AxiosError = AxiosError;// alias for CanceledError for backward compatibilityaxios.Cancel = axios.CanceledError;// Expose all/spreadaxios.all = function all(promises) {return Promise.all(promises);};axios.spread = spread;// Expose isAxiosErroraxios.isAxiosError = isAxiosError;// Expose mergeConfigaxios.mergeConfig = mergeConfig;axios.AxiosHeaders = AxiosHeaders$1;axios.formToJSON = function (thing) {return formDataToJSON(utils$1.isHTMLForm(thing) ? new FormData(thing) : thing);};axios.getAdapter = adapters.getAdapter;axios.HttpStatusCode = HttpStatusCode$1;axios["default"] = axios;return axios;
});

可直接在 script 引入使用

也可例如 require 来使用

requirejs.config({baseUrl: "modules/",
});
require(["tools_umd"], function (tools) {console.log("tools", tools);
});

CommonJS(browser) 模块文件使用

dist\browser\axios.cjs

dist\browser\axios.cjs.map

axios.default = axios;module.exports = axios;

if (pathname === "/index.html") {pipeFileToResponse(res, "./client.html");
} else if (pathname === "/axios.js") {//pipeFileToResponse(res, "../dist/esm/axios.js", "text/javascript");
} else if (pathname === "/axios.js.map") {pipeFileToResponse(res, "../dist/esm/axios.js.map", "text/javascript");
}

function pipeFileToResponse(res, file, type) {if (type) {res.writeHead(200, {"Content-Type": type,});}fs.createReadStream(path.join(path.resolve(), "sandbox", file)).pipe(res);
}

<script src="/axios.js"></script>
<script>// 执行axios
</script>

## CommonJS(node) 模块

module.exports && require

dist\node\axios.cjs

dist\node\axios.cjs.map

//axios.cjs
(function (global, factory) {// typeof exports === "object" && typeof module !== "undefined"? (module.exports = factory())// 这段代码检查require.js是否存在，这是一个JavaScript依赖管理库。
// 如果'define'不是未定义的，并且它是一个函数，并且'amd'（异步模块定义）也被定义，那么代码假设require.js正在运行。: typeof define === "function" && define.amd? define(factory): ((global =typeof globalThis !== "undefined" ? globalThis : global || self),(global.axios = factory()));
})(this, function () {"use strict";var axios = createInstance(defaults$1);// Expose Axios class to allow class inheritanceaxios.Axios = Axios$1;// Expose Cancel & CancelTokenaxios.CanceledError = CanceledError;axios.CancelToken = CancelToken$1;axios.isCancel = isCancel;axios.VERSION = VERSION;axios.toFormData = toFormData;// Expose AxiosError classaxios.AxiosError = AxiosError;// alias for CanceledError for backward compatibilityaxios.Cancel = axios.CanceledError;// Expose all/spreadaxios.all = function all(promises) {return Promise.all(promises);};axios.spread = spread;// Expose isAxiosErroraxios.isAxiosError = isAxiosError;// Expose mergeConfigaxios.mergeConfig = mergeConfig;axios.AxiosHeaders = AxiosHeaders$1;axios.formToJSON = function (thing) {return formDataToJSON(utils$1.isHTMLForm(thing) ? new FormData(thing) : thing);};axios.getAdapter = adapters.getAdapter;axios.HttpStatusCode = HttpStatusCode$1;axios["default"] = axios;return axios;
});

module.exports = factory() 是一种常见的模块导出模式，尤其在 CommonJS 环境中。

这种模式通常用于将模块的内部函数或对象导出，以便在模块外部使用。

这里的factory()通常是一个返回特定对象或函数的表达式，该对象或函数随后被赋值给module.exports。

ES Modules 模块的文件使用

dist\esm\axios.js

dist\esm\axios.js.map

dist\esm\axios.min.js

dist\esm\axios.min.js.map

一个 JS 文件中，export 可以有无限个，但 export default 只能有一个。

const {Axios,AxiosError,CanceledError,isCancel,CancelToken,VERSION,all,Cancel,isAxiosError,spread,toFormData,AxiosHeaders,HttpStatusCode,formToJSON,getAdapter,mergeConfig,
} = axios$1;export {Axios,AxiosError,AxiosHeaders,Cancel,CancelToken,CanceledError,HttpStatusCode,VERSION,all,axios$1 as default,formToJSON,getAdapter,isAxiosError,isCancel,mergeConfig,spread,toFormData,
};
//# sourceMappingURL=axios.js.map

if (pathname === "/index.html") {pipeFileToResponse(res, "./client.html");
} else if (pathname === "/axios.js") {// text/javascriptpipeFileToResponse(res, "../dist/esm/axios.js", "application/javascript");
} else if (pathname === "/axios.js.map") {pipeFileToResponse(res, "../dist/esm/axios.js.map", "application/javascript");
}

function pipeFileToResponse(res, file, type) {if (type) {res.writeHead(200, {"Content-Type": type,});}fs.createReadStream(path.join(path.resolve(), "sandbox", file)).pipe(res);
}

<script type="module" src="/axios.js"></script>
<script type="module">import axios from "/axios.js";// 执行axios
</script>

AMD 模块

注意，AMD 只适用于浏览器，虽然也支持 Node，但不如 Node 自家的 CJS。