How to optimize ember-data with r.js - javascript

I recently switched to ember-data#canary, then r.js started failing.
[Error: Error: ENOENT, no such file or directory
'/scripts/lib/ember-data/ember-data/core.js'
In module tree:
app/main
app/app
ember-data
at Object.fs.openSync (fs.js:427:18)
]
This is the build configuration file
`File: build.js`
var config = {
mainConfigFile: '/scripts/common.js',
}
This is the requirejs configuration file
requirejs.config({
paths: {
ember: 'ember/ember',
jquery: 'jquery/dist/jquery',
requirejs: 'requirejs/require',
handlebars: 'handlebars/handlebars',
'ember-data': 'ember-data/ember-data',
},
shim: {
ember: {
deps: [
'handlebars',
'jquery'
],
exports: 'Ember'
},
'ember-data': {
deps: [
'ember'
],
exports: 'DS'
},
}
});
This is how i use ember-data:
define(['ember', 'ember-data'], function(Ember, DS) {
});
You can see the ember-data canary builds here.

This bug have meet from ember-data 1.0.0-beta.9, because in this version has been updated function require in sources. You can revert to beta.8 or try to fix this problem with plugin derequire (grunt-derequire, gulp-derequire).
I've fix it with this task:
gulp.task('build-derequire', function() {
return gulp.src([paths.src.common + '/bower_components/**/ember-data*.js'])
.pipe($.derequire([
{
from: 'require',
to: '_dereq_'
},
{
from: 'define',
to: '_defi_'
}
]))
.pipe(gulp.dest(paths.dev_dist + '/scripts/lib'));
});

Related

Loading the Trello client library with RequireJs

I'm trying to load the Trello client.js library with RequireJs.
Here is my require.config:
require.config({
paths: {
'jquery': '../lib/jquery-3.3.1.min',
'trello': 'https://api.trello.com/1/client.js?key=7881&token=6985',
'vue': '../lib/vue.min',
'popper': 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min',
'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min'
},
shim: {
trello: {
deps: ['jquery'],
exports: 'trello'
},
vue: {
exports: 'Vue'
},
bootstrap: {
deps: ['jquery','popper']
}
}
});
Here is where I am loading it:
define(['trello', 'vue'], function(Trello, Vue) {
Trello.post(/*some irrelevant info */);
}
Looking at the sources in the inspector, I can see that the source for client.js is pulled down. However I continually get the error
app.js:81 Uncaught TypeError: Cannot read property 'post' of undefined
Where am I going wrong?

r.js optimizer not taking from config

I am using gulp and requirejs-optimize
My init.js
;
(function(require) {
"use strict";
//Constants
require.config({
paths: {
"angular": "app/libs/angular/angular.min",
"domready": "app/libs/domReady/domReady",
"angular-ui-router": "app/libs/angular-ui-router/release/angular-ui-router.min",
"angular-bootstrap": "app/libs/angular-bootstrap/ui-bootstrap.min",
"App": "app/app",
"angular-animate": "app/libs/angular-animate/angular-animate.min",
"ui-bootstrap-tpls": "app/libs/angular-bootstrap/ui-bootstrap-tpls.min",
"enums": "app/enums"
},
waitSecond: 0,
shim: {
"angular": {
exports: "angular",
deps: []
},
"angular-ui-router": {
deps: ["angular"]
},
"angular-bootstrap": {
deps: ["angular"]
},
"ui-bootstrap-tpls": {
deps: ["angular-bootstrap"]
},
"domready": {
deps: []
},
"App": {
deps: ["angular"]
},
"angular-animate": {
deps: ["angular"],
exports: "angular"
}
}
});
//This module defines all the Global constants for the app
define("CONST", [], {
templatesPath: "views/",
URL: "https://saltjs-nirus.c9.io/service"
});
define(["require", "domready"], function(require, domready) {
domready(function() {
require(["angular", "App", "app/router"], function(angular, app) {
angular.bootstrap(document, ["salt"]);
});
});
});
})(window.requirejs);
and my Build config file is as below
var gulp = require("gulp");
var requirejsOptimize = require('gulp-requirejs-optimize');
gulp.task('scripts', function() {
return gulp.src(["./../ClientApp/init.js", "./../ClientApp/app/libs/domReady/domReady.js"])
.pipe(requirejsOptimize(function(file) {
return {
baseUrl: "./../ClientApp/",
useStrict: true,
optimize: "uglify",
paths: {
"angular": "app/libs/angular/angular.min",
"domready": "app/libs/domReady/domReady",
"angular-ui-router": "app/libs/angular-ui-router/release/angular-ui-router.min",
"angular-bootstrap": "app/libs/angular-bootstrap/ui-bootstrap.min",
"App": "app/app",
"angular-animate": "app/libs/angular-animate/angular-animate.min",
"ui-bootstrap-tpls": "app/libs/angular-bootstrap/ui-bootstrap-tpls.min",
"enums": "app/enums"
},
shim: {
"angular": {
exports: "angular",
deps: []
},
"angular-ui-router": {
deps: ["angular"]
},
"angular-bootstrap": {
deps: ["angular"]
},
"ui-bootstrap-tpls": {
deps: ["angular-bootstrap"]
},
"domready": {
deps: []
},
"App": {
deps: ["angular"]
},
"angular-animate": {
deps: ["angular"],
exports: "angular"
}
}
}
}))
.pipe(gulp.dest('./../build/final.js'));
});
gulp.task("default", ['scripts'])
Problem: When run gulp i am getting below error
ENOENT, no such file or directory
'/home/ubuntu/workspace/ClientApp/domReady.js'
Here the requirejs optimizer is not taking the path option specified in the build-config file, instead its searching for the physical path which is throwing the error. How can i force the optimizer to lookup to the path option specified in the r.js build config and pick up the files from there for optimization.
Finally i figured out to make it work:
I switched from gulp-optimizer to straight Node r.js as Gulp dev have suggested to use the optimizer directly as r.js is not compatible with gulp.
Git Blacklist.json:
"gulp-module-requirejs": "use the require.js module directly",
Below is my config file:
({
mainConfigFile: "./../ClientApp/app/init.js",
name: "init",
baseUrl: "./../ClientApp/app/",
insertRequire:["init"],
findNestedDependencies: true,
out: "./../ClientApp/build/final.js",
wrap: true,
optimize: "uglify",
uglify: {
toplevel: true,
ascii_only: true,
beautify: false,
max_line_length: 1000,
defines: {
DEBUG: ['name', 'false']
},
no_mangle: true
}
});
I am using uglify for minification provided by require.js
Explanation:
mainConfigFile: Use this option to point out to the file where you have defined your paths, shims, deps etc. RequireJs is intelligent enough to pick the config from this declaration for processing(they use regex pattern to filter this part, so be careful. Refer their DOC)
name : An entrypoint module name. Define this where your executin kicks-off. PS: If you have config and EP is the same file, require will detect this and add the name to your defined call.
insertRequire: This will insert a require statement at the end which will trigger the execution of your code. See the DOC.
findNestedDependencies : Instruct require to pick the dependencies from your entrypoint file. Traverse thorough the files and grab the dependencies for final build.
Rest is self explanatory or refer the documentation
Well this saved me.
To use with the gulp build system see gulp shell module, by this you can wireup your build system to automate the complete process.
Refer this answer to know how to achieve this.
Hope this answer helps someone stuck same as me!

Using requirejs and trying to optimize javascript into a vendor file and an app file

I'm working on a project using requirejs and I'm trying to optimize my javascript into two files: vendor libraries and app code. Unfortunately, I can't seem to get it to work.
Folder structure:
backbone_components/
app/
less/
js/
component1/
component2/
layouts/
dashboard/
about/
lib/
config.js
main.js
index.html
dist/
Gruntfile.js
config.js:
require.config({
baseUrl: '../js/',
paths: {
jquery: '../../bower_components/jquery/dist/jquery',
underscore: '../../bower_components/lodash/dist/lodash',
backbone: '../../bower_components/backbone/backbone',
text: '../../bower_components/requirejs-text/text'
},
enforeceDefine: true
});
define(['backbone', 'main'], function(Backbone, app) {
});
Gruntfile.js:
requirejs: {
options: {
dir: 'dist/js/',
mainConfigFile: 'app/js/config.js',
optimize: 'none',
normalizeDirDefines: 'all',
skipDirOptimize: true
},
dist: {
options: {
modules: [
{
name: 'vendor',
include: ['jquery', 'underscore', 'backbone', 'text'],
},
{
name: 'app',
exclude: ['vendor']
}
]
}
}
});
When I run grunt, I get the following error: "Error: Error: ERROR: module path does not exist: /path/to/project/app/js/app/js/vendor.js for module named: vendor."
Why is it looking for "vendor" when it doesn't exist yet?
I take it that you have no module named vendor in the source you want to optimize. If this is correct, then the error you are getting is because r.js is looking for a module named vendor. You have to tell it to create it with the create option:
modules: [
{
name: 'vendor',
create: true, // <--- Add this option!
include: ['jquery', 'underscore', 'backbone', 'text']
},
{
name: 'app',
exclude: ['vendor']
}
]
Without the option r.js understands you to be effectively saying "take the vendor module and include with it jquery, etc." With the option, you are telling it to create vendor from scratch.
The create option is documented in this file.

RequireJS module dependencies and includes

In my RequestJS config file, I am loading select2 and I'd like to also load locales for it. I currently have this setup :
require.config({
enforceDefine: true,
baseUrl: '/js',
shim: {
'bootstrap#3.1.1': {
deps: [ 'jquery' ],
exports: '$' // export jQuery...
},
'jquery#2.1.1': {
exports: '$'
},
'select2': {
deps: [
'bootstrap',
'lib/select2_locales/select2_locale_fr',
/// NOTE : add locales here
'css!/css/select2/select2.css',
'css!/css/select2/select2-bootstrap.css',
],
exports: '$.fn.select2'
}
},
paths: {
'bootstrap#3.1.1': 'lib/bootstrap.min',
'jquery#2.1.1': 'lib/jquery.min'
 },
map: {
'*': {
'css': 'css#0.1.2',
'jquery': 'jquery#2.1.1',
'bootstrap': 'bootstrap#3.1.1'
}
}
});
The problem, here, is that lib/select2_locales/select2_locale_fr needs to be loaded after select2.min.js.
Is there some way I can change this configuration, or add an option, so I can load the locales along with select2, from the require config file?
If that is the case, then select2_locale_fr is not a dependency of select 2, select2 is a dependency of select2_locale_fr
define('locale_specific_select2',['select2'], function(select2){
select2.accomodateNewLocale= function(stuff){
doWhatYouNeedToWith(stuff);
}
locale = determineLocale()
function processLocaleData(localeData){
select2.accomodateNewLocale(localeData);
}
require(['pathTOLocalePlugin'+locale], processLocaleData);
}

How to load JSON.js library with Require JS in order to make a Backbone app work in IE7?

I have managed to make my Backbone app work with IE8 - IE Edge... Yey:)
The last stone is IE7 - I get the following Backbone error:
'JSON' is undefined - file: backbone.js
And there is some part of the backbone library code highlighted by IE's console:
s.data=JSON.stringify(i.attrs||e.toJSON(i)
From what I read, I have to load JSON2 or JSON3 library because IE7 does not have it.
Ok, googled and go the following library - JSON 3:
http://cdnjs.cloudflare.com/ajax/libs/json3/3.2.6/json3.min.js
Now, I use require js to load my application, and I have no idea how to integrate this with my app config.
What are it's dependencies, what does it export?
Here is my config for require js:
/**
* Config.
*/
require.config({
paths: {
"jquery" : "libs/jquery",
"underscore" : "libs/underscore",
"backbone" : "libs/backbone",
"text" : "libs/require/text",
"global" : "libs/global",
templates: '../templates'
},
shim: {
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
underscore: {
exports: '_'
},
text : {
exports : 'text'
}
},
global : {
deps: ["jquery"],
exports : 'Global'
}
});
require([
'jquery',
'underscore',
'backbone',
'router',
'global'
], function ($, _, Backbone, Router) {
// Compatibility override, add a close function for the Backbone views.
var router = new Router();
Backbone.history.start();
});
Any ideas?
First add the json library to your path config:
paths: {
"json": "http://cdnjs.cloudflare.com/ajax/libs/json3/3.2.6/json3.min.js",
"jquery" : "libs/jquery",
"underscore" : "libs/underscore",
"backbone" : "libs/backbone",
"text" : "libs/require/text",
"global" : "libs/global",
templates: '../templates'
},
The json library has no dependencies and exports a global variable JSON. You will need to make the backbone library depend on the json library, and load the JSON library with a shim config. See below:
shim: {
json: {
exports: 'JSON'
},
backbone: {
deps: ["underscore", "jquery", "json"],
exports: "Backbone"
},
underscore: {
exports: '_'
},
text: {
exports: 'text'
}
}

Categories

Resources