javascript 的引入

这本文章没有任何技术含量，纯粹就是解决单页引入第三发库的问题而写的，如果要理解深刻查看模块加载器祥光资料。

@(es5)

一、静态引入
二、动态引入
总结

一、静态引入

1. html标签script引入

2. esm 中`import ModuleName from 'module/path'`

3. commonjs 中 `const ModuleName = reuquire(module/path)`

4. AMD

年代久远，价值在于jquery源码采用模块是AMD，你要学习jquery设计模式，必先学习AMD

require(['module1/path'], function (module1) {

	module.someMethod()

})

5. CMD

完全忘记是什么，现在就只知道到它一个特点，就近依赖（类似动态加载）

6. `webpack .externals`

构建引入（其他构建工具暂不清楚），这个根据webapck版本设置，因为webpack每个版本都有调整，参考地址 https://www.webpackjs.com/configuration/externals/#externals

二、动态引入

1. `import()`

https://www.webpackjs.com/guides/lazy-loading/

import('module1/path').then(res => {

	// todo

	// 如果是esm，res.default 是引入模块地址

	// 如果是commonjs, res 是引用模块地址

})

// 打包成chunk 模块

import(/*webpackChunkName Module1 */, 'module1/path').then((res) => {

	// todo

})

2. `require.ensure()` （已经不推荐使用了）

注意：这不是commonjs规范，这是 webpack中module 知识点

require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)

示例：

const modulePathObj = {

	module1: 'module1/path'

}

const modulePathAry = Object.keys(modulePathObj).map(item => modulePathObj[item])

require.ensure(modulePathAry, function(require) {

	const module1 = require(modulePathObj.module1)

})

阮一峰 commonjs require基础参考

3. DOM节点`script`的`onload`事件

export const LoadScript = (url) => {

	return new Promise((resolve, reject) => {

		try {

			const script = document.createElment('script')

			script.onload = () => {

				resolve()

			}

			script.src = url

			document.querySelect('head').appendChild(script)

		} cathc (err)  {

			reject(err)

		}

	})

}

4. jsonp

通常听到是解决跨域（但在现在跨域的解决方案基本上是nginx）。jsonp的机制不就是返回js的callBack。

百度地图在es6中就是这么引入（我目前就遇到这个）

export const loadBMap = function () {

    const AK = '百度ak值'

    const url = 'https://api.map.baidu.com/api?v=2.0&amp;ak=' + AK + '&s=1&callback=onBMapCallback'

    return new Promise((resolve, reject) => {

      // 如果已加载直接返回

      if (typeof BMap !== 'undefined') return resolve(BMap)

      // 百度地图异步加载回调处理

      window.onBMapCallback = function () { resolve(BMap) }

      // 插入script脚本

      let scriptNode = document.createElement('script')

      scriptNode.setAttribute('type', 'text/javascript')

      scriptNode.setAttribute('src', url)

      document.body.appendChild(scriptNode)

    })

  }

}

问题: 在 es6 引入百度地图，引入某个api的类，可以ak的值不存在问题的（也就是，jsopn的对应的参数不存在）？

解决方案：在入口文件添加一个 script 标签，如下：

<script src="https://api.map.baidu.com/api?v=2.0&ak=百度ak值"><script>

不用担心 BMap 引入问题，因为BMap 是全变量，只需 loadBMap 中判断 BMap 是否存在，如果存在就不执行loadScript。

总结

js引入不成功，上面是10种方式中肯定有一种能解决的，我目前是没有遇到不成功的，就算是seajs，无非define第三方库模块方式。