在ES6工程中动态引入CDN资源

在ES6工程中动态引入CDN资源

在目前的前端发展中，几乎所有的前端项目都是基于webpack、rollup构建工具进行构建开发的，模块化已成为常态。其中，ES5的模块import、export机制是其中最为常用的特性。

1. ES6的import机制

在目前的前端发展中，几乎所有的前端项目都是基于webpack、rollup构建工具进行构建开发的，模块化已成为常态。其中，ES5的模块import、export机制是其中最为常用的特性。

//value.js
export const value = 'qianyuqianduan';

//main.js
import { value } from 'value.js'

上面的代码便是基本的ES6 import语法，可以看出是与CommonJS的语法是非常相似的。这种将文件分为模块，通过简单的import和export来互相引用导出，主要有以下好处：

• 可以避免全局变量的污染，每个模块与模块之间的变量互相独立，不受其他模块的影响
• 可以有效的处理依赖关系，webpack的打包便是基于ES6的import依赖树

但ES6的引入也不是没有缺点的。按照这种引入的思路，应该是将所有的资源包发布到npm，通过npm下载到本地，然后import相关资源。所有import只能去处理本地的资源。
那么一些内部的cdn静态资源呢？开发时经常碰到公司将js资源发布到服务器，这种怎么在前端工程中引入呢？

2. CDN动态资源的引入——html引入js

第一种方法是最简单粗暴的，每个前端工程其实都有一个基础的index.html文件。可以直接在html中加入script脚本。
如果cdn资源是分为生产环境和测试环境两个，可以先在.env、.env.dev、.env.prod这些文件中先把资源链接配置成环境变量。比如

NODE_ENV=development
VUE_APP_LINK=http://xxxx.js

然后在html文件中动态插值即可

<script src="<%= VUE_APP_LINK%>"></script>

3. CDN动态资源的引入——使用函数动态添加JS

第二种方法其实原理和第一种是一样的，只不过是封装好一个通过动态添加js的函数，需要时调用即可。
具体方法如下：
新建一个js文件，里面定义一个动态添加js的方法，Vue中可以放在Mixin中当做公共方法。

//LoadCDNJSMixin.js
let LoadCDNJSMixin = {
    methods:{
        LoadCDNJS(url,callback) {
            let head = document.getElementByTagName('head')[0]
            let script = document.createElement('script')
            script.type = 'text/javascript'
            script.src = url
            if(typeof callback === 'function'){
                script.onload = script.onreadystatechange = function(){
                    if(!this.readyState||this.readyState==='loaded'||this.readyState==='complete'){
                        callback()
                        script.onload = script.onreadystatechange = null
                    }
                }
            }
            head.appendChild(script)
        },
        LoadCDNCSS(url) {
            let head = document.getElementByTagName('head')[0]
            let link = document.createElement('link')
            link.rel = 'stylesheet'
            link.href = url
            head.appendChild(link)
        }
    }
}

//a.vue
import LoadCDNJSMixin from './LoadCDNJSMixin.js'
export default {
    mixins:[LoadCDNJSMixin],
    created() {
        let urlJS = 'http.xxx.js'
        let urlCSS = 'http.xxx.css'
        this.LoadCDNJS(urlJS,()=>{})
        this.loadCDNCSS(urlCSS)
    }
}