without-cdn

Time:2021-1-19

Web project using CDN resources can speed up the access of the project, but sometimes when the project is deployed in the intranet or the CDN we choose is not stable, there will be an embarrassing situation that the project cannot run normally after deployment.

If you put all the CDN resources locally, there will be some additional directories and files in the project (these files don’t need to be modified for ten thousand years, and they may be formatted by the editor if you click them carelessly), and they also need to be submitted to the code base. When you need to refer to the CDN When upgrading or changing the version of a resource, you need to repeatedly download the corresponding resource and submit it to the project. You also need to remove the previous version file.

If you have encountered the above embarrassment in the process of development, I suggest you try without CDN, which may bring you a little surprise.

Install without CDN

Global installation is recommended, which can be directly used in the command line

$npm install -g without-cdn

Advantages & working principle

Advantages:

CDN resources can be used in the development process. CDN resources do not need to be downloaded locally. The resource version can be changed by modifying the URL, and CDN resources can be downloaded and replaced only when the project is deployed

working principle:

  1. Extract the script and link tags from the files to be processed, and analyze the URL starting with HTTP
  2. Download the extracted HTTP URL list to the specified local directory
  3. Replace the HTTP URL in the file

Command line usage

$ 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:
  -5. -- version display version
  -F -- filepath < string > required parameter, the file path to be processed, pay attention to whether the path is valid (use \ \ or /), support full path and relative path
  -E -- exclude < string > ignored path. Multiple paths can be configured and separated by half width comma. For example, multiple CDNs are used in the project, and the self built CDN path does not need to be downloaded or replaced. You can configure exclude.
  -D -- folder < string > directory name of CDN file download. If it does not exist, it will be created in the same path of processing file
  -Do you want to print log with - Lo or - logsoff, and turn off log output
  -h. -- help display help


//After build index.html , using jQuery of bootcdn and font file of alicdn
<!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 > XXX Co., Ltd. < / Title > < script > < / script > < script > < / script >

//Processing without TCDn 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.

//After treatment index.html At the same time, there are more fonts in the. / static directory_ 2031940_ kylw1ml1 bn.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 > XXX Co., Ltd. < / Title > < script > < script > < script > < style >"

Used in JS

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

//Parameter description
withoutCDN({
    Log: Boolean, // print log
    Filepath: string, // required parameter, the file path to be processed. Note whether the path is valid (use \ \ or /). Full path and relative path are supported
    Exclude: string | string [] and // ignored paths. Multiple paths can be configured by array
    Folder: string // the name of the directory where the CDN file is downloaded. If it does not exist, it will be created in the same path as the processed file
});


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

​```

Using without CDN when packaging react projects

Method 1: install without CDN globally package.json It is recommended to use the post hook in the scripts of

// "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"
},

Method 2: install in the project, in scripts/ build.js Call in

// scripts/ build.js Call withoutCDN in the last then () of checkBrowsers ().

...
...
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 !

Recommended Today

How to Build a Cybersecurity Career

Original text:How to Build a Cybersecurity Career How to build the cause of network security Normative guidelines for building a successful career in the field of information security fromDaniel miesslerstayinformation safetyCreated / updated: December 17, 2019 I’ve been doing itinformation safety(now many people call it network security) it’s been about 20 years, and I’ve spent […]