关于node.js:withoutcdn

3次阅读

共计 3592 个字符，预计需要花费 9 分钟才能阅读完成。

Web 我的项目应用 CDN 资源能减速我的项目的拜访，然而有时候我的项目部署在内网或者咱们选用的 CDN 不稳固，就会呈现我的项目部署后无奈失常运行的难堪状况。

把 CDN 资源全副放在本地，我的项目中就会多出一些额定的目录和文件（这些文件万年不须要批改，一不小心点开还可能被编辑器格式化了），而且还须要提交进代码库，当须要对援用 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>...

```
const withoutCDN = require("without-cdn");

// 参数阐明
withoutCDN({
    log: boolean,               // 是否打印日志
    filepath: string,           // 必填参数，须要解决的文件门路，留神门路是否无效（应用 \\ 或 /），反对全门路、相对路径
    exclude: string | string[], // 疏忽的门路, 反对应用数组配置多个门路
    folder: string              // CDN 文件下载的目录名称，如不存在会在解决的文件同一门路下创立
});


withoutCDN({
    filepath: "build/index.html",
    folder: "static"
});

```

办法一：全局装置 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) => {});
...
...