I have defined webpack ProvidePlugin to load Backbone-relational library as follows.
plugins: [
new webpack.ProvidePlugin({
$ : "jquery",
Backbone : "backbone",
_ : "underscore",
"Backbone.Relational": "backbone-relational",
})
However Backbone-relational also exports:
Backbone.RelationalModel
Backbone.HasOne
Backbone.HasMany
etc...
My problem is that I can not have them all exported. What is the right way to do this with webpack?
Try to use relational shim as described here
Related
I've installed the jQuery typings and all the project dependencies. But I really can't wrap my head around this one.
template source (jade):
.form-group
.col-sm-4
label Birth Date
datetime(name="birthDate", [(ngModel)]="transaction.general_information.birthDate")
...
module source (ts):
import { NKDatetimeModule } from 'ng2-datetime/ng2-datetime';
...
#NgModule({
imports: [
...,
NKDatetimeModule
],...
})
...
Error (Dev Console Chrome):
EXCEPTION: Error in ./OrdersNewStep1 class OrdersNewStep1 - inline template:0:1046 caused by: jQuery is not defined
Github project:
ng2-datetime
Using:
Angular2
Webpack
WebPack is placing all modules into an isolated scopes. Meanwhile, most of plugins expect jQuery to be defined in a global scope. You can fix it using Provide plugin for webpack like this
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
I've been trying to provide my webpack compiled modules with grunt. All my files need at least 1 or 2 globals (React, Backbone and underscore).
These assets will be compiled into js, react views. I'm wondering how I can use ProvidePlugin to give all my modules some base packages, with webpack and/or grunt configs?
I have no clue where this code would live! Gruntfile.js? Entry js file?
plugins: [
webpack.ProvidePlugin({
"_": "underscore"
})
]
or
new webpack.ProvidePlugin({
$: "jquery"
})
I researched and found this is the closest:
Webpack ProvidePlugin vs externals?
Thank you very much for your help!
Figured it out! Ends up the grunt webpack config takes the same options? Looks like it :)
grunt.initConfig({
pkg: pkgConfig,
loyalty: loyaltyConfig,
webpack: {
development: {
// resolve: {
// modulesDirectories: [ 'vendors' ]
// },
amd: {
$: true
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'underscore',
React: 'react/addons',
config: 'json!../../config.json'
})
],
This will include the required elements if and only if they're used apparently.
I have build and app using requirejs and use it to load html templates and a single config file via the text plugin.
After concatenation the html templates are inlined in the JS, which is fine, but I need the config.json file to still remain as a file which is loaded externally like before concatenation.
Example code of the main view
define([
'jquery',
'underscore',
'backbone',
'lib/text!templates/main.html',
'lib/text!config.json',
], function($, _, Backbone, projectListTemplate, Config) {
var MainView = Backbone.View.extend({});
})
This is my build file
({
appDir: './../public',
baseUrl: 'static/js/app',
dir: './../dist',
modules: [
{
name: 'main'
}
],
fileExclusionRegExp: /^(r|build)\.js$/,
exclude: ['config.json'],
optimizeCss: 'standard',
removeCombined: true,
paths: {
jquery: 'lib/jquery-2.0.3.min',
waypoints: 'lib/waypoints.min',
underscore: 'lib/underscore',
backbone: 'lib/backbone',
text: 'lib/text',
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery',
'waypoints'
],
exports: 'Backbone'
},
}
})
You should exclude your file in the same way you included it. Try this way:
exclude: ['lib/text!config.json']
But I just stopped using this approach, because it requires existence of config.json file in build phase. Instead I'm using nested require calls (You may use require inside your defined modules to load files in runtime). Unlike define, nested require may not be included in build process (and by default they are not) and validation phase will be fine.
Be advised, this approach has at least one disadvantage:
Nested require calls are also asynchronous. But in my case that is not a problem.
This question already has an answer here:
requirejs - what export exactly do here?
(1 answer)
Closed 9 years ago.
I am new to RequireJS and wa just going through the following configuration code;
({
appDir: "../",
baseUrl: "js",
dir: "../../appdirectory-build",
paths: {
jquery: 'libs/jquery/jquery-1.8.2',
underscore: 'libs/underscore/underscore-1.4.4',
backbone: 'libs/backbone/backbone-0.9.10',
templates: '../templates',
app: 'app'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
},
modules: [
{
name: "main"
}
]
})
I did not understand what exactly is the "shim" used for?
Could someone please explain me in simple terms.
You can define non modular old scripts using shim config. By the non modular I mean the scripts those don't declare there dependencies using define(). So in the shim config in the above example you mention to load underscore and export it as '_' that means when the underscore is loaded it is accessible using _ in your application. And for backbone it means that before loading backbone, shim should ensure that underscore and jquery are loaded prior to backbone. Because underscore and jquery are the dependencies of the backbone, so shim is helping managing your dependencies of non modular scripts. After loading backbone export it as "Backbone" in your application.
Here's my situation, using Backbone and Handlebars with Requirejs.
I'm following CommonJS module definition style, because I find myself to be more comfortable with it:
define(function(require) {
var Backbone = require('Backbone')
var Item = require('model/item')
// ...
})
And this is my requirejs config:
require.config({
baseUrl: "/javascripts/",
paths: {
jquery: 'components/jquery/jquery',
underscore: 'components/underscore/underscore',
backbone: 'components/backbone/backbone',
handlebars: 'components/handlebars/handlebars',
text: 'components/text/text'
},
shim: {
underscore: {
exports: "_"
},
handlebars : {
exports: "Handlebars"
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
Everything is running smooth before optimization, no problem occurs.
But, after optimization with r.js dependencies seem to break.
I'd like to use Almond js in production, so here's my build file:
({
baseUrl: ".",
paths: {
jquery: "components/jquery/jquery",
underscore: "components/underscore/underscore",
handlebars: "components/handlebars/handlebars",
backbone: "components/backbone/backbone",
text: "components/text/text"
},
// we use almond minimal amd module loader
name: "components/almond/almond",
// the application entry point
include: ['app/init'],
// we need to teel almond to require app/init
insertRequire: ['app/init'],
out: "main.js",
cjsTranslate: true,
wrap: true,
optimize: "none"
})
Now, when I run the optimized javascript in browser, all I get are error messages, saying me that jQuery and Handlebars are undefined (neither Backbone.$ is, of course).
A simple workaround was to force jQuery loading, and assigning it to Backbone, like this:
var $ = require('jQuery')
var Backbone = require('Backbone')
Backbone.$ = $
But it sounds very silly and redundant to me.
I feel like I'm doing something wrong but cannot figure out what.
After optimization Handlebars fail to load as dependency too.
If I force its loading (as I did with jQuery), I get an error message during the build process, saying me that the module fs (a npm package) cannot be found.
I googled but found only this topic on Google groups (https://groups.google.com/forum/?fromgroups=#!topic/requirejs/lYwXS-3qjXg) that seems to be related to my problem, even if proposed solutions are not working at all.
I think you should add the Shim's config in your build file too.