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 inheritance
axios.Axios = Axios$1;
// Expose Cancel & CancelToken
axios.CanceledError = CanceledError;
axios.CancelToken = CancelToken$1;
axios.isCancel = isCancel;
axios.VERSION = VERSION;
axios.toFormData = toFormData;
// Expose AxiosError class
axios.AxiosError = AxiosError;
// alias for CanceledError for backward compatibility
axios.Cancel = axios.CanceledError;
// Expose all/spread
axios.all = function all(promises) {
return Promise.all(promises);
};
axios.spread = spread;
// Expose isAxiosError
axios.isAxiosError = isAxiosError;
// Expose mergeConfig
axios.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 inheritance
axios.Axios = Axios$1;
// Expose Cancel & CancelToken
axios.CanceledError = CanceledError;
axios.CancelToken = CancelToken$1;
axios.isCancel = isCancel;
axios.VERSION = VERSION;
axios.toFormData = toFormData;
// Expose AxiosError class
axios.AxiosError = AxiosError;
// alias for CanceledError for backward compatibility
axios.Cancel = axios.CanceledError;
// Expose all/spread
axios.all = function all(promises) {
return Promise.all(promises);
};
axios.spread = spread;
// Expose isAxiosError
axios.isAxiosError = isAxiosError;
// Expose mergeConfig
axios.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/javascript
pipeFileToResponse(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。
