在 Backbone 中使用 NPM 模块和 RequireJS
Using NPM module in Backbone with RequireJS
海萨,
我正在编写一个 webapp,它由一个 Node 后端(Express 服务器)组成,它为客户端提供一个 Backbone 应用程序。
Backbone 应用程序使用 RequireJS 加载使用的模块。
我想使用 Ag-grid 客户端,它可以作为 NPM 模块包含在内。
https://www.ag-grid.com/javascript-grid-getting-started/index.php
如何从 Backbone 引用这个 NPM 模块?
项目结构
./node_modules
./src/package.json
./src/app (Node backend + Express server)
./src/public
./src/public/main.coffee (contains requireJs config)
./src/public/scripts (Backbone views, models, etc)
main.coffee
require.config
baseUrl: '../scripts/'
paths:
jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min'
jqueryui: '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min'
...
我想在此处包含 ag-grid NPM 模块,但不必将最顶层的 ./node_modules
文件夹引用为 ../../../node_modules/ag-grid/dist/ag-grid
( 未计算级别..)。
另外,我希望尽可能避免第二个 package.js 和第二个 npm install
任何与此项目结构相关的帮助?
其次,有没有更好的方法来构建这样一个项目? (服务于 Backbone webapp 的节点后端)
谢谢
您猜对了,使用相对路径一直到 node_modules
目录是正确的方法。
requirejs.config({
paths: {
"ag-grid": "../../../node_modules/ag-grid/dist/ag-grid",
"backbone": "../../../node_modules/backbone/backbone"
}
});
define(["backbone", "ag-grid"], function(Backbone, agGrid) {
// whatever
});
您还可以对所有依赖项使用 npm
,并使用 RequireJS optimizer (r.js
).
捆绑应用的优化版本
就个人而言,我使用 npm
来开发项目和服务器端(节点)依赖项。对于我的 Backbone 应用程序,我使用 Bower 因为它专门用于前端依赖项管理。
我有一个 .bowerrc
文件告诉 bower 在何处安装依赖项:
{
"directory": "src/lib",
}
还有一个 Gulp 任务调用 bower install
:
var bower = require("bower"),
$ = require('gulp-load-plugins')({ lazy: true }),
gulp = require("gulp");
gulp.task('bower', function() {
return bower.commands.install()
.on('log', function(data) {
$.util.log('bower', $.util.colors.cyan(data.id), data.message);
});
});
此任务在 npm install
之后使用 npm 挂钩自动调用:
"scripts": {
// ...
"postinstall": "gulp install"
}
看看 simplified-js-project,这是一个示例项目,它展示了我围绕 Backbone 和 RequireJs 项目开发的工具。
海萨, 我正在编写一个 webapp,它由一个 Node 后端(Express 服务器)组成,它为客户端提供一个 Backbone 应用程序。 Backbone 应用程序使用 RequireJS 加载使用的模块。 我想使用 Ag-grid 客户端,它可以作为 NPM 模块包含在内。 https://www.ag-grid.com/javascript-grid-getting-started/index.php
如何从 Backbone 引用这个 NPM 模块?
项目结构
./node_modules
./src/package.json
./src/app (Node backend + Express server)
./src/public
./src/public/main.coffee (contains requireJs config)
./src/public/scripts (Backbone views, models, etc)
main.coffee
require.config
baseUrl: '../scripts/'
paths:
jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min'
jqueryui: '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min'
...
我想在此处包含 ag-grid NPM 模块,但不必将最顶层的 ./node_modules
文件夹引用为 ../../../node_modules/ag-grid/dist/ag-grid
( 未计算级别..)。
另外,我希望尽可能避免第二个 package.js 和第二个 npm install
任何与此项目结构相关的帮助? 其次,有没有更好的方法来构建这样一个项目? (服务于 Backbone webapp 的节点后端)
谢谢
您猜对了,使用相对路径一直到 node_modules
目录是正确的方法。
requirejs.config({
paths: {
"ag-grid": "../../../node_modules/ag-grid/dist/ag-grid",
"backbone": "../../../node_modules/backbone/backbone"
}
});
define(["backbone", "ag-grid"], function(Backbone, agGrid) {
// whatever
});
您还可以对所有依赖项使用 npm
,并使用 RequireJS optimizer (r.js
).
就个人而言,我使用 npm
来开发项目和服务器端(节点)依赖项。对于我的 Backbone 应用程序,我使用 Bower 因为它专门用于前端依赖项管理。
我有一个 .bowerrc
文件告诉 bower 在何处安装依赖项:
{
"directory": "src/lib",
}
还有一个 Gulp 任务调用 bower install
:
var bower = require("bower"),
$ = require('gulp-load-plugins')({ lazy: true }),
gulp = require("gulp");
gulp.task('bower', function() {
return bower.commands.install()
.on('log', function(data) {
$.util.log('bower', $.util.colors.cyan(data.id), data.message);
});
});
此任务在 npm install
之后使用 npm 挂钩自动调用:
"scripts": {
// ...
"postinstall": "gulp install"
}
看看 simplified-js-project,这是一个示例项目,它展示了我围绕 Backbone 和 RequireJs 项目开发的工具。