使用Waypoints与Webpack时遇Uncaught TypeError构造器错误

我之前也碰到过一模一样的问题，根源在于Waypoints无框架版本在CommonJS模块环境（比如Webpack）里的导出逻辑和全局环境不一样——直接用script标签引入时，它会把Waypoint挂载到window对象上，但Webpack打包时模块作用域是隔离的，直接require可能没法正确拿到构造函数。

这里有几个靠谱的解决方案：

方案1：修正导入方式，正确获取导出的构造函数 #

Waypoints的无框架版本其实已经支持CommonJS导出，只是有时候Webpack的模块解析需要更明确的写法。你可以把导入代码改成这样：

// 不用写完整的node_modules路径，直接用包名+相对路径即可
const Waypoint = require('waypoints/lib/noframework.waypoints');

如果还是报错，试试ES6的导入语法（需要确保Webpack配置了Babel支持ES6）：

import Waypoint from 'waypoints/lib/noframework.waypoints';

方案2：用exports-loader提取全局变量 #

如果Waypoints没有正确导出构造函数，我们可以用exports-loader把全局的Waypoint变量提取为模块导出：

1. 先安装exports-loader：

npm install exports-loader --save-dev

2. 修改你的导入代码：

const Waypoint = require('exports-loader?Waypoint!waypoints/lib/noframework.waypoints.js');

或者在Webpack配置里添加规则，统一处理Waypoints文件：

var path = require("path");
module.exports = {
  entry: "./scripts/app.js",
  output: {
    path: path.resolve(__dirname, "./temp"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /noframework\.waypoints\.js$/,
        use: 'exports-loader?Waypoint'
      }
    ]
  }
}

配置完后就可以正常导入了：

const Waypoint = require('waypoints/lib/noframework.waypoints');

方案3：直接从window对象获取（临时应急用，不推荐） #

如果你只是想快速验证功能，可以直接引用全局的Waypoint：

// 先确保Waypoints被加载到window上
require('waypoints/lib/noframework.waypoints');
var waypoint = new window.Waypoint({
  element: document.getElementById('about-text'),
  handler: function() {
    alert('Basic waypoint triggered');
  }
});

不过这种方式不符合模块化最佳实践，建议优先用前两种方案。

你可以先试方案1，大多数情况下修改导入路径就能解决问题，不行再换方案2。

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