Backbone.js环境搭建 #

一、环境要求 #

1.1 基本要求 #

要求 说明
Node.js 推荐v12+（使用npm时）
浏览器 现代浏览器或IE11+
编辑器 VS Code推荐

1.2 依赖说明 #

text 
Backbone.js依赖关系
├── Underscore.js（必需，>=1.8.3）
├── jQuery/Zepto（可选，用于DOM操作和AJAX）
└── JSON2（可选，旧浏览器支持）

二、安装方式 #

2.1 直接引入（推荐入门） #

最简单的方式是直接在HTML中引入：

html 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Backbone.js App</title>
</head>
<body>
    <div id="app"></div>
    
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.6/underscore-min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/backbone@1.6.0/backbone-min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    
    <script src="app.js"></script>
</body>
</html>

2.2 CDN地址 #

CDN 地址
jsDelivr https://cdn.jsdelivr.net/npm/backbone@1.6.0/backbone-min.js
unpkg https://unpkg.com/backbone@1.6.0/backbone-min.js
cdnjs https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.6.0/backbone-min.js

2.3 npm安装 #

bash 
# 创建项目目录
mkdir my-backbone-app
cd my-backbone-app

# 初始化package.json
npm init -y

# 安装Backbone和依赖
npm install backbone underscore jquery

2.4 yarn安装 #

bash 
# 安装Backbone和依赖
yarn add backbone underscore jquery

2.5 Bower安装（已过时） #

bash 
# 注意：Bower已不再推荐使用
bower install backbone underscore jquery

三、项目结构 #

3.1 基础项目结构 #

text 
my-backbone-app/
├── index.html
├── css/
│   └── style.css
├── js/
│   ├── models/
│   │   └── todo.js
│   ├── collections/
│   │   └── todos.js
│   ├── views/
│   │   └── todo-view.js
│   ├── routers/
│   │   └── router.js
│   └── app.js
└── lib/
    ├── backbone.js
    ├── underscore.js
    └── jquery.js

3.2 模块化项目结构 #

text 
my-backbone-app/
├── package.json
├── src/
│   ├── index.html
│   ├── main.js
│   ├── models/
│   │   └── todo.js
│   ├── collections/
│   │   └── todos.js
│   ├── views/
│   │   └── todo-view.js
│   ├── routers/
│   │   └── router.js
│   ├── templates/
│   │   └── todo.html
│   └── styles/
│       └── main.css
└── dist/
    └── bundle.js

四、模块化配置 #

4.1 ES6模块 #

javascript 
import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';

const Todo = Backbone.Model.extend({
    defaults: {
        title: '',
        completed: false
    }
});

export default Todo;

4.2 CommonJS模块 #

javascript 
const $ = require('jquery');
const _ = require('underscore');
const Backbone = require('backbone');

const Todo = Backbone.Model.extend({
    defaults: {
        title: '',
        completed: false
    }
});

module.exports = Todo;

4.3 AMD模块（RequireJS） #

javascript 
require.config({
    paths: {
        jquery: 'lib/jquery',
        underscore: 'lib/underscore',
        backbone: 'lib/backbone'
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        }
    }
});

define(['backbone'], function(Backbone) {
    const Todo = Backbone.Model.extend({
        defaults: {
            title: '',
            completed: false
        }
    });
    
    return Todo;
});

五、构建工具配置 #

5.1 Webpack配置 #

安装依赖：

bash 
npm install webpack webpack-cli --save-dev

webpack.config.js：

javascript 
const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.html$/,
                use: ['raw-loader']
            }
        ]
    },
    externals: {
        jquery: 'jQuery'
    }
};

5.2 Vite配置 #

安装依赖：

bash 
npm install vite --save-dev

vite.config.js：

javascript 
import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        outDir: 'dist',
        lib: {
            entry: 'src/main.js',
            name: 'MyApp'
        }
    }
});

5.3 Browserify配置 #

安装依赖：

bash 
npm install browserify --save-dev

构建命令：

bash 
browserify src/main.js -o dist/bundle.js

六、开发环境 #

6.1 开发服务器 #

使用http-server：

bash 
# 安装
npm install http-server -g

# 运行
http-server -p 8080

使用live-server：

bash 
# 安装
npm install live-server -g

# 运行
live-server

6.2 热重载配置 #

使用Webpack Dev Server：

bash 
npm install webpack-dev-server --save-dev
javascript 
module.exports = {
    devServer: {
        contentBase: './dist',
        hot: true,
        port: 8080
    }
};

七、TypeScript支持 #

7.1 安装类型定义 #

bash 
npm install @types/backbone @types/underscore @types/jquery --save-dev

7.2 TypeScript配置 #

tsconfig.json：

json 
{
    "compilerOptions": {
        "target": "ES5",
        "module": "ES6",
        "lib": ["DOM", "ES5", "ES2015"],
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "outDir": "./dist"
    },
    "include": ["src/**/*"]
}

7.3 TypeScript示例 #

typescript 
import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';

interface TodoAttributes {
    title: string;
    completed: boolean;
}

const Todo = Backbone.Model.extend<TodoAttributes>({
    defaults: {
        title: '',
        completed: false
    },
    
    toggle(): void {
        this.set('completed', !this.get('completed'));
    }
});

export default Todo;

八、调试工具 #

8.1 Backbone Debugger #

Chrome扩展，用于调试Backbone应用：

text 
功能：
- 查看所有Model实例
- 查看所有Collection
- 查看所有View
- 查看Router状态
- 事件监听器追踪

8.2 开发版Backbone #

开发时使用未压缩版本：

html 
<script src="backbone.js"></script>
<!-- 而不是 backbone-min.js -->

8.3 调试技巧 #

javascript 
Backbone.Model.prototype.set = function(key, value, options) {
    console.log('Model.set called:', key, value);
    return Backbone.Model.prototype.set.apply(this, arguments);
};

九、验证安装 #

9.1 创建测试文件 #

html 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Backbone.js Test</title>
</head>
<body>
    <div id="app"></div>
    
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.6/underscore-min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/backbone@1.6.0/backbone-min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    
    <script>
        console.log('Backbone version:', Backbone.VERSION);
        console.log('Underscore version:', _.VERSION);
        console.log('jQuery version:', $.fn.jquery);
        
        var TestModel = Backbone.Model.extend({
            defaults: {
                message: 'Hello Backbone!'
            }
        });
        
        var model = new TestModel();
        console.log('Model created:', model.toJSON());
    </script>
</body>
</html>

9.2 预期输出 #

text 
Backbone version: 1.6.0
Underscore version: 1.13.6
jQuery version: 3.7.1
Model created: {message: "Hello Backbone!"}

十、常见问题 #

10.1 Underscore未定义 #

text 
错误：Uncaught ReferenceError: _ is not defined
解决：确保先引入Underscore.js

10.2 jQuery未定义 #

text 
错误：Uncaught ReferenceError: $ is not defined
解决：引入jQuery或Zepto

10.3 模块导入问题 #

javascript 
// 错误方式
import Backbone from 'backbone';  // 可能无法正确导入$

// 正确方式
import Backbone from 'backbone';
import $ from 'jquery';
Backbone.$ = $;

十一、总结 #

环境搭建要点：

  1. 选择合适的安装方式：入门推荐CDN，项目推荐npm
  2. 确保依赖正确：Underscore是必需依赖
  3. 配置构建工具：大型项目推荐Webpack或Vite
  4. 使用开发工具：安装调试扩展提高效率
最后更新：2026-03-28