diff --git a/packages/webpack-add-cdn-script/README.md b/packages/webpack-add-cdn-script/README.md new file mode 100644 index 0000000..fd03bf8 --- /dev/null +++ b/packages/webpack-add-cdn-script/README.md @@ -0,0 +1,72 @@ +# webpack-add-cdn-script + +这是一个在 webpack 中使用公共 cdn 的库,包括了 unpkg, jsdelivr 等多个 cdn 资源,如加载失败会自动切换下一个 cdn 进行加载。 + +## 开始 + +### 安装 + +``` +pnpm install webpack-add-cdn-script -D +``` + +### 使用 + +webpack.config.js + +```js +const webpackAddCdnScript = require("webpack-add-cdn-script"); + +// 需要使用cdn库,按顺序添加,如react-router-dom需要依赖react、@remix-run/router、react-router,因此需要放在最后 +const externals = { + react: "React", + "react-dom": "ReactDOM", + "@remix-run/router": "@remix-run/router", + "react-router": "react-router", + "react-router-dom": "ReactRouterDOM", +}; + +module.exports = { + // 其他配置省略 + externals: externals, + plugins: [new webpackAddCdnScript({})], +}; +``` + +使用自定义的 cdn + +```js +const webpackAddCdnScript = require("webpack-add-cdn-script"); + +// 需要使用cdn的模块,会按顺序插入脚本,如 +const externals = { + react: "React", + "react-dom": "ReactDOM", +}; + +module.exports = { + // 其他配置省略 + externals: externals, + plugins: [ + new webpackAddCdnScript({ + customScript: { + react: "", + "react-dom": + "", + }, + }), + ], +}; +``` + +options + +| 参数 | 解析 | 类型 | 默认值 | +| ------------ | ------------------- | ------------------------------------------------ | --------------------- | +| customScript | 自定义 cdn 脚本 | { [*key*: string]: string } | 无 | +| defaultCdns | 默认使用 cdn 的顺序 | ("unpkg"\| "jsdelivr" \| "bootcdn" \| "cdnjs")[] | ["jsdelivr", "unpkg"] | + +## 注意事项 + +- 接入了各大 cdn 的 api 接口进行请求,默认会保存一份 cdn 的缓存在你的根目录中`.cdn-cache.json`。如果发现缓存的资源有问题可以删除该文件,然后重新执行打包流程。 +- 按顺序添加 cdn,如 react-router-dom 需要依赖 react、@remix-run/router、react-router,因此需要放在最后。