共计 3592 个字符，预计需要花费 9 分钟才能阅读完成。
Web 我的项目应用 CDN 资源能减速我的项目的拜访，然而有时候我的项目部署在内网或者咱们选用的 CDN 不稳固，就会呈现我的项目部署后无奈失常运行的难堪状况。
把 CDN 资源全副放在本地，我的项目中就会多出一些额定的目录和文件（这些文件万年不须要批改，一不小心点开还可能被编辑器格式化了），而且还须要提交进代码库，当须要对援用 CDN 资源降级或者更换版本时，又须要反复去下载对应的资源提交到我的项目中，还须要移除之前的版本文件。
如果你开发的过程中也碰到过下面的小难堪，倡议你试试 without-cdn，说不定能带给你一点小惊喜。
装置 without-cdn
倡议全局装置，能够间接在命令行中应用
$npm install -g without-cdn劣势 & 工作原理
劣势：
开发过程中能够应用 CDN 资源，CDN 资源不必下载到本地，批改 url 即可更换资源版本，且仅在我的项目部署时下载和替换 CDN 资源
工作原理：
- 对须要解决的文件中 script 和 link 标签进行提取，剖析出以 http 结尾的 url
- 将提取的 http url 列表下载到指定的本地目录
- 更换文件中的 http url
命令行应用
$ withoutcdn --help
Options:
-V, --version output the version number
-f --filepath <string> the file path that to be processed
-e --exclude <string> exclude the CDN path, multiple paths use commas to separate
-d --folder <string> destination folder for the CDN file
-lo --logsoff logs off
-h, --help display help for command
Options:
-V, --version 显示版本
-f --filepath <string> 必填参数，须要解决的文件门路，留神门路是否无效（应用 \\ 或 /），反对全门路、相对路径
-e --exclude <string> 疏忽的门路，反对配置多个门路，用半角逗号宰割。例如我的项目中应用了多个 CDN，自建的 CDN 门路不须要下载替换，能够配置 exclude。-d --folder <string> CDN 文件下载的目录名称，如不存在会在解决文件的同一门路下创立
-lo --logsoff 是否打印日志，加上 -lo 或 --logsoff 敞开日志输入
-h, --help 显示帮忙
// build 后的 index.html，应用了 bootcdn 的 jquery 和 alicdn 的 font 文件
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><link rel="shortcut icon" href="/favicon.ico"/><title>XXXX 有限公司 </title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.2/jquery.min.js"></script><script src="http://at.alicdn.com/t/font_2031940_kylw1ml1bn.js"></script>.....
// 应用 withoutcdn 解决 index.html
$ withoutcdn -f ./index.html -d static
withoutCDN start...
find CDN fileList:
https://cdn.bootcdn.net/ajax/libs/jquery/2.1.2/jquery.min.js
http://at.alicdn.com/t/font_2031940_kylw1ml1bn.js
download http://at.alicdn.com/t/font_2031940_kylw1ml1bn.js successfully.
download https://cdn.bootcdn.net/ajax/libs/jquery/2.1.2/jquery.min.js successfully.
// 解决后的 index.html，同时./static 目录下多出了 font_2031940_kylw1ml1bn.js jquery.min.js
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><link rel="shortcut icon" href="/favicon.ico"/><title>XXXX 有限公司 </title><script src="./static/jquery.min.js"></script><script src="./static/font_2031940_kylw1ml1bn.js"></script><style>...JS 中应用
```
const withoutCDN = require("without-cdn");
// 参数阐明
withoutCDN({
log: boolean, // 是否打印日志
filepath: string, // 必填参数，须要解决的文件门路，留神门路是否无效（应用 \\ 或 /），反对全门路、相对路径
exclude: string | string[], // 疏忽的门路, 反对应用数组配置多个门路
folder: string // CDN 文件下载的目录名称，如不存在会在解决的文件同一门路下创立
});
withoutCDN({
filepath: "build/index.html",
folder: "static"
});
```React 我的项目打包时应用 without-cdn
办法一：全局装置 without-cdn，在 package.json 的 scripts 中应用 post 钩子，举荐应用该办法
// "postbuild": "withoutcdn -f build/index.html -d static",
"scripts": {
"build-css": "node-less-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-less-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-app-rewired start",
"start": "npm-run-all -p start-js",
"build-js": "react-app-rewired build",
"build": "npm-run-all build-js",
"postbuild": "withoutcdn -f build/index.html -d static",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},办法二：在我的项目中装置，在 scripts/build.js 中调用
// scripts/build.js, 在 checkBrowsers() 的最初一个 then() 中调用 withoutCDN
...
...
const FileSizeReporter = require("react-dev-utils/FileSizeReporter");
const printBuildError = require("react-dev-utils/printBuildError");
const withoutCDN = require("without-cdn");
...
...
const {checkBrowsers} = require("react-dev-utils/browsersHelper");
checkBrowsers(paths.appPath, isInteractive)
.then(() => {})
.then((previousFileSizes) => {})
.then(({ stats, previousFileSizes, warnings}) => {
...
...
...
withoutCDN({
filepath: "build/index.html",
folder: "static"
});
},
(err) => {})
.catch((err) => {});
...
...Hope you will like !
正文完
