npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cdn-assets-switch

v1.0.0

Published

switch all assets cdn name (script,link,background-image,img). when you open one website in a test domain you can switch cdn name to location.hostname

Downloads

19

Readme

cdn-assets-switch

intro

switch all assets cdn domain(script,link,background-image,img). 切换所有静态资源文件的 cdn 域名。包括 script,link,background-image,img

when you open one website in a test domain you can switch cdn name to location.hostname or any domain 当你打开网站在一个测试域名,你可以将所有的 cdn 域名切换到当前域名或者任何域名

when use

When you build front end assets in build tools like webpack. It will add cdn domain to assets. 当你使用像 webpack 这样的构建工具构建前端资源,cdn 域名将会写死到资源中去。

when you publish assets to test domain,It will load cdn-domain assets too(but cdn does not has assets). If you want to change cdn domain you can use this package. 当你发布了资源到测试域名所在的环境,他仍然会加载 cdn 的域名资源(但是此时 cdn 上没有该资源).如果你想切换 cdn 域名,你可以使用本模块。

I Recommend inline index.js to head. !!!Only use in test environment. 推荐内联 index.js 到 head.注意!!!只建议在测试域名使用。

// in test domain exec
if (is_in_test_domain && window.CdnAssetsSwitch) {
  var CdnAssetsSwitchObj = new CdnAssetsSwitch(function(url, type, sourceEl) {
    if (url && url.indexOf("static.baidu.com")) {
      return url.replace("static.baidu.com", location.hostname);
    }
  });
  // hack webpack to modify publicUrl this can be exec immediately. this must exec before async load like import()  or require.ensure
  CdnAssetsSwitchObj.hackWebpack();

  // replace when all assets load
  document.addEventListener("load", function() {
    CdnAssetsSwitchObj.reset();
  });
}

documents

all function


/**
 * @desc replaceFunc 
    1. return null undefined '' will not replace
    2. return new url string 
 *  @param url current url
    @param type replaceType script,image,backgroundImage,link,webpack
    @param sourceEl htmlNode or styleSheets.rules or __webpack_require__
 *  */
function replaceFunc(url, type, sourceEl){

}
new CdnAssetsSwitch(replaceFunc);

CdnAssetsSwitch.prototype = {
    reset // reset all assets
    // extend script and link attrs
    extendAttr,
    // replace asset url
    relaceScriptSrc,
    replaceLinkStyle,
    replaceBackGroundImage,
    relaceImgSrc,
    // hack webpack PublicUrl
    replaceWebpackPublicUrl, // plan one 
    hackWebpack // plan two
}