使用Uglify压缩Backbone视图，引入Webpack后遇问题求助

看起来你遇到了Webpack打包后Backbone视图失效的典型问题，我来帮你拆解可能的原因和解决办法：

先回顾你的代码场景 #

你的视图代码（activity.view.js）：

var ViewActivity = Backbone.View.extend({
  el: '#Activity',
  events:{
    'change #grade': 'gradeChanged'
  },
  initialize: function(params){
    _.bindAll(this, 'gradeChanged', 'render');
    this.model = new MyModel(params)
    this.render();
  },
  gradeChanged: function(){ },
  render: function(){ }
});

HTML中的调用：

<script>
var view = new ViewActivity({ foo: 'bar' });
</script>

之前能正常运行是因为所有变量（Backbone、_、MyModel、ViewActivity）都是全局可用的，但Webpack会把每个文件当作独立模块，打破了原来的全局作用域，这是核心问题。

可能的问题及解决方案 #

1. 模块未正确导入，变量找不到

Webpack默认不会把模块中的变量暴露到全局，所以首先要确保所有依赖都通过模块方式导入：

• 先确认你已经通过npm安装了依赖：

npm install backbone underscore

• 在activity.view.js顶部添加导入语句：

// 导入核心依赖
import Backbone from 'backbone';
import _ from 'underscore';
// 导入你的自定义Model，替换成实际文件路径
import MyModel from './path/to/your/MyModel';

• 如果你需要在HTML的<script>中直接调用ViewActivity，需要把它暴露到全局：

// 在activity.view.js末尾添加
window.ViewActivity = ViewActivity;

2. DOM元素未加载就初始化视图

Webpack打包后的JS可能在DOM中的#Activity元素渲染前就执行了，导致Backbone找不到指定的el。解决办法：

• 把HTML中的初始化代码放到DOM加载完成的回调里：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 确保DOM全部加载后再创建视图
  var view = new ViewActivity({ foo: 'bar' });
});
</script>

3. MyModel未正确导出/导入

如果你的MyModel也是用传统全局方式写的，现在需要改成模块导出：
比如在MyModel.js中添加导出：

var MyModel = Backbone.Model.extend({
  // 你的Model逻辑
});
// 导出模块
export default MyModel;

然后在activity.view.js中按路径导入它，就像前面第一点说的那样。

4. Underscore绑定上下文失败

如果_.bindAll报错，大概率是Underscore没有正确导入。除了确保导入_，你也可以改用ES6的箭头函数来绑定上下文（不过Backbone传统推荐用_.bindAll）：

initialize: function(params){
  // 或者用bind方法确保上下文
  this.gradeChanged = this.gradeChanged.bind(this);
  this.render = this.render.bind(this);
  this.model = new MyModel(params)
  this.render();
}

先从模块导入和全局暴露这两点入手排查，这是Webpack迁移Backbone代码最常见的坑。如果还有具体的报错信息，可以补充出来，能更精准定位问题。

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