How to implement lodash with new version of BB 1.1.1 or 1.1.2, which has AMD wrapper?
And how to exports Backbone into global scope, with requirejs?
1.1.0 - without amd wrapper, works good.
Thnk's.
If you have libraries that depend on lodash explicitly, such as lodash-template-loader, you will need to use this:
paths: {
lodash: <path to lodash>,
....
},
map: {
"*": {
"underscore": "lodash"
}
}
At that point, any dependency on underscore will load lodash instead, and the template loader will work.
Having this in your config should work:
paths: {
underscore: <path to lodash>,
backbone: <path to backbone>,
jquery: <path to jquery>
}
You must use a version of lodash that is compatible with Backbone. This is the one created with lodash backbone when you use the CLI. You do not need shims of any of these. Defining underscore so that it points to lodash will make Backbone use lodash.
Related
In my webpack-es6-angularjs app I struggle with a problem where I could need some help: When trying to load a 3rd-party library, the 3rd-party library raises an error, that jQuery is undefined even though jQuery is exposed through webpack.
//webpack.config.js
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
The 3rd-party library uses jQuery through !$window.jQuery.support... but $window.jQuery does not exist – NOTE the extra $ from angularjs – where as window.jQuery exists as expected form the webpack config.
monkey-patching the 3rd-party library works but of course is to no solution. Any idea where this can come from and how this could be solved?
Okay, so I was able to solve it by explicitly injecting jQuery into the angularjs $window object:
import * as jquery from 'jquery';
import { IWindowService } from 'angular';
function jQueryService($window: IWindowService): any {
$window['jQuery'] = jQuery;
return jquery;
};
jQueryService.$inject = ['$window'];
export default jQueryService;
I'm currently having trouble getting my React application working in IE11. The problem seems to be that some of the newer ES6 stuff isn't available in IE11. So my goal is to polyfill the missing functionality. I'm using nwb [1] which is a zero-configuration setup for React applications. However, I'm unsure how to configure Babel (or Webpack ?) to polyfill certain methods like Array.from. It looks like fetch, Promise, and Object.assign are all polyfill-ed but not Array.from for example. Any help would be greatly appreciated.
Here is my nwb.config file:
module.exports = {
type: 'react-app',
webpack: {
define: {
VERSION: JSON.stringify(require('./package.json').version),
HOSTNAME: JSON.stringify(process.env.NODE_ENV === 'production' ?
'https://xyz.azurewebsites.net' :
'http://localhost:8080')
},
rules: {
babel: {
test: /\.jsx?/
}
},
extra: {
resolve: {
extensions: ['.jsx']
},
devtool: '#inline-source-map'
},
html: {
favicon: 'src/img/favicon.ico'
}
}
};
Thanks,
[1] A toolkit for React app. https://github.com/insin/nwb
Sounds like you need to add babel-polyfill to your project.
This will emulate a full ES2015+ environment and is intended to be
used in an application rather than a library/tool. This polyfill is
automatically loaded when using babel-node.
This means you can use new built-ins like Promise or WeakMap, static
methods like Array.from or Object.assign, instance methods like
Array.prototype.includes, and generator functions (provided you use
the regenerator plugin). The polyfill adds to the global scope as well
as native prototypes like String in order to do this.
The easiest way for you would probably be to import it at the top of your main js file:
import 'babel-polyfill';
I wanted to see what I would need to do to use Backbone BUT not use jQuery?
I want to use Famo.us for the views and so trying to decouple jQuery from Backbone. I will mostly be using just the Backbone Models and Collections - though may use the framework for a View and insert 'Famo.us' code. Bit Famo.us has this integration low on the list of things to do...
If I just wanted to use the Models and Collections of Backbone, what would I need to do in order for it to run successfully without jQuery?
Thanks.
-- I've just tried replacing jQuery with jBone but it doesn't seem to like the change:
require.config({
baseUrl: "js",
nodeRequire: require,
paths: {
"backbone" : "vendor/backbone.min",
// exoskeleton : "vendor/exoskeleton.min",
jbone: "vendor/jbone.min",
json2: "vendor/json2",
"requirejs": "vendor/requirejs/require",
underscore: "vendor/underscore.min"
},
shim: {
jbone: {
exports: "$"
},
underscore: {
exports: "_"
},
backbone: {
deps: ["jbone", "underscore", "json2"],
exports: "Backbone"
}
}
// map: {
// 'exoskeleton': {'underscore': 'underscore-empty'}, // Remap Exoskeleton to use an empty underscore file.
// '*': {
// 'underscore': 'underscore-private', // Everything else in the app that requests _ will use the Backbone.utils version.
// 'backbone': 'exoskeleton'
// }
// }
});
I did try Exoskeleton though could not see examples of how to use it properly - so I wanted to try and simply remove jQuery and try jBone.
I'm going to be using Famo.us for the Views, so only really need to use Backbone for the MC part of MVC.
Backbone use jQuery only to manipulate with DOM. If you won't do that - you didn't need jQuery ( for example you are using only model system with enother framework or work at server side).
You also can use another lib instead of jQuery ( with the same API ) - like Eksoskeleton or other likes - - just redefine Backbone.$
P.s look at https://github.com/inkling/backbone.native and https://github.com/jashkenas/backbone/wiki/Using-Backbone-without-jQuery
I'm looking to use AngularStrap in an existing Angular.js application which is using require.js as the module loader. I'm having trouble getting AngularStrap loaded correctly in the application. When I try to include 'angularStrap' in my Angular module, it fails to initialise. Below is an extract from my requirejs config.
paths: {
'angular' : 'lib/angularjs/angular',
'angularStrap': 'lib/angularstrap/angular-strap',
'angularStrapTpl': 'lib/angularstrap/angular-strap.tpl',
},
shim: {
'angularStrap' : {
deps : [ 'angular', 'angularStrapTpl' ],
},
}
Has anyone managed to use AngularStrap with require.js? I suspect my dependencies are slightly incorrect.
Yo need to add angular-animate to your requirejs configuration.
Github Link: https://github.com/Augus/ngAnimate
In Addy Osmani's ToDo MVC example for require.js + Backbone: https://github.com/addyosmani/todomvc/blob/gh-pages/dependency-examples/backbone_require/js/main.js, he's using
Backbone.history.start() // line #31
without actually requiring Backbone. How/why does this work? Is the shim enabling this? Or am I missing something obvious?
If you have a look in the code, view/app.js is actually requiring Backbone.
And the backbone shim is exporting the global Backbone variable.
If no other modules will actually require the shim, it won't be loaded, so it won't be accessible.
You can try to remove the 'views/app' requirements in main.js to see for yourself.
As #ChristiMihai mentioned, Backbone created a global Backbone object, correct. Let me give you an example of what I do in my Require.js / Backbone / Handlebars app:
First, I include Require config in <head>:
var require_config = {
baseUrl: "/javascripts",
waitSeconds: 5,
paths: {
'cdnjs': 'http://ajax.cdnjs.com/ajax/libs',
'aspnetcdn': 'http://ajax.aspnetcdn.com/ajax',
'cloudflare': 'http://cdnjs.cloudflare.com/ajax/libs',
'local': '/javascripts'
}
}
if (typeof require !== 'undefined') {
require.config(require_config);
} else {
var require = require_config;
}
After that I bootstrap a require module, e.g:
define([
'app'
],
function() {
console.log('Homepage module');
/*
... this is the meat of your app...
you can add other dependencies beside `app` too
*/
});
Now app is the main dependency which resolves via baseUrl to /javascripts/app.js and includes all necessary deps in order, and looks like this:
define([
'order!cdnjs/json2/20110223/json2',
'order!cloudflare/underscore.js/1.3.1/underscore-min',
'order!cloudflare/backbone.js/0.9.2/backbone-min',
'order!handlebars/handlebars-1.0.0.beta.6.min',
'order!lib/ns',
'bootstrap'
], function(){});