Laravel Mix/WebPack环境下集成npm版lity时报lity.iframe非函数错误

你碰到的报错本质是两个和webpack模块集成相关的认知错位，和lity库本身的功能无关：

1. 老的单静态脚本架构下，直接粘贴的lity是完整UMD版本，加载时会自动把所有公开API（包括handlers、iframe方法）挂载到全局window.lity上，所有脚本在全局作用域共享这些引用。但webpack打包后，所有模块都运行在独立的封闭作用域，不会自动把库的方法暴露到全局。
2. 通过npm安装的lity是按模块化拆分设计的：核心入口只导出lity的主启动方法，iframe、youtube、vimeo这类内置处理器是独立的子模块，不会随主包自动加载。你仅通过require('lity')导入主包时，拿到的对象上根本不存在iframe方法，自然会抛出“不是函数”的运行时错误。
   另外你写的lity = require('lity')没有加const/let声明关键字，在webpack的严格模式打包规则下，这种隐式赋值不会生成可正常访问的变量引用，也会导致作用域内的lity和库本身的实例不匹配。

• 修正导入写法，去掉隐式全局赋值：把原来的无声明赋值改成带关键字的模块导入，保证作用域内的lity引用和库模块完全对齐：

// 二选一即可，不要漏写声明关键字
const lity = require('lity');
// 或者ES模块写法
import lity from 'lity';

• 按需引入缺失的内置处理器模块：在导入lity主包之后，手动引入你用到的iframe处理器，让它把iframe方法注册到lity的静态方法上：

// 引入内置iframe处理器，挂载lity.iframe方法
import 'lity/dist/iframe';

• 调整自定义代码的执行顺序：确保你注册自定义handler的代码，放在lity主包和对应处理器模块全部加载完成之后，不要出现“先执行自定义逻辑、后加载库代码”的顺序错位。

碰到npm安装的第三方库在webpack环境下报“X方法不是函数”，可以顺着两个方向快速定位：

• 先核对导入方式和库的导出结构是否匹配：有些库用export default导出主方法，有些用命名导出，写错导入方式就会拿到空对象或者不完整的导出对象。
• 再确认库的模块化拆分规则：很多库为了控制包体积，会把非核心功能拆成独立子模块，不会随主包自动加载，需要手动按需引入对应子模块才能拿到对应的方法。

注意：不要依赖webpack自动把库挂载到全局，如果你确实需要在全局作用域访问lity，可以在导入模块后手动赋值：window.lity = lity，不要靠隐式赋值的写法碰运气。

内容的提问来源于stack exchange，提问作者AdamJones