I already asked this question on StackOverflow, the solution was supposed to have been patched in commits :
89bf2786e322323293f52917223aa24db7649951
and
783da4030bf9e727bfb4fc874b59f77521545264
But even after doing some extensive testing with this setup :
Dojo / DojoX / Dijit 1.8.3
Util in it's latest version (master branch on GitHub)
I keep getting the same issue.
The issue is the following :
After building my application with the util build.sh script.
My profile is :
var profile = {
basePath: '../src/',
action: 'release',
cssOptimize: 'comments',
mini: true,
internStrings: true,
optimize: 'closure',
layerOptimize: 'closure',
stripConsole: 'none',
selectorEngine: 'acme',
layers: {
'dojo/dojo': {
include: [ 'dojo/dojo', 'dojo/i18n', 'dojo/domReady', 'app/main', 'app/run', 'app/widgets/Application'],
boot: true,
customBase: true
},
},
staticHasFeatures: {
'dojo-trace-api': 0,
'dojo-log-api': 0,
'dojo-publish-privates': 0,
'dojo-sync-loader': 0,
'dojo-xhr-factory': 0,
'dojo-test-sniff': 0
}
};
and running :
java -Xms256m -Xmx256m -cp ../shrinksafe/js.jar:../closureCompiler/compiler.jar:../shrinksafe/shrinksafe.jar org.mozilla.javascript.tools.shell.Main ../../dojo/dojo.js baseUrl=../../dojo load=build --require "$myConfig" --profile "$myProfile" --releaseDir "$myReleaseDir" $#
1) My Dijit templates are inlined in the output file like they should, but when running the app, Dojo is still making Ajax requests for the already inlined templated !
2*) The nls directory is placed in the wrong directory (dojo directory in place of the root directory) and has to be moved. (I'm not sure if this is related to the bug I encounter.)
Inline format is :
"url:path/to/my/template.html":'<p>Some escaped HTML</p>'
Template require format :
dojo/text!./path/to/my/template.html
Thanks in advance !
I also had similar problem. In my application i used multiple dijit widgets and to avoid many AJAX calls I created a layer.
layers:{
'dijit/mydijit':{
include:["dijit/_base","many dijit widgets"]
}
After including dijit/mydijit.js in my application the browser kept on making AJAX call for dijit/_base
To solve this problem i added dijit/_base as dependency of dijit/mydijit layer
layers:{
'dijit/mydijit':{
include:["dijit/_base","many dijit widgets"],
dependecies:["dijit/_base"]
}
After this there are no requests for dijit/_base.
Hope this helps you :)
Related
I'm currently building a UI Kit for a client who is using ASP.NET for the main application/backend for their project. The UI Kit that I'm building is created using NuxtJS and I want to compile all of the SCSS files along with Bootstrap into a single compiled CSS file, from what I've gathered on the Nuxt Docs they recommend compiling the SCSS files into single CSS files for each component.
Before I start making a mess of the config file, is there a way to compile them into a single file so the client can just enqueue it on their end? It doesn't need to be the most performative which is why we're going to push it into a singular file.
Here is the part of the doc for Nuxt2, I quote
You may want to extract all your CSS to a single file. There is a workaround for this:
nuxt.config.js
export default {
build: {
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|vue)$/,
chunks: 'all',
enforce: true
}
}
}
}
}
}
This part is not directly written but still available for Nuxt3, so I guess that it should work in a similar approach.
There is only one discussion on Nuxt3's repo, but you may start trying the snippet above already, to see if it fill some of your needs.
I am planning to use Dojo toolkit with Tapestry 5.4. I started off with the tapestry quickstart project and tried to include dojo. However, I have been facing a lot of issues w.r.t the new require mechanisms.
- Unknown Type error - require is not a function
- Unable to load the dojo module
webapp Directory structure
webapp
+------- mybootstrap
+----------- js (part of tapestry quick start project)
+------- js (js folder I added for Dojo)
+----------- dojo (All dojo files here)
Using it with Tapestry 5.3 was pretty simple - including the dojo.js file in the layout component. The same thing does not work in 5.4
I have tried using requirejs data-main attribute, but still stuck with it.
Any help will be appreciated.
Put all your dojo files in webapp\js folder.
your folder structure should be like
// Folder structure
-webapp
-js
-dojo
-digit
-dojox
Note: Make sure you provide the access to js/* path. So that url : http://localhost:8080/app/js/dojo/dojo.js accessible.
Put a script tag inside your tapestry page (*.tml) and add dojo modules using requireJS using below script,
<script type="text/javascript">
setTimeout(
function() {
var dojoConfig = {
async : true
};
require.config({
packages :
[ {
name : 'dojo',
location : '../js/dojo'
} ],
});
require(
[ 'dojo', 'dojo/dom' ],
function(dojo, dom) {
console.log(dojo);
dom.byId("myDiv").innerHTML = "updatedHTML content";
});
}, 1000);
</script>
thats it.
I have created own build profile following the instructions from http://www.sitepen.com/blog/2012/06/11/dgrid-and-dojo-nano-build/. I've created bootstrap layer for dojo:
'dojo/dojo': {
include: ['dojo/dojo', 'dojo/domReady', 'dojo/_base/declare'],
boot: true,
customBase: true
},
I've noticed also, that if I skip definition of this layer, the bigger dojo package is created, so the modules included in the second layer are duplicated.
The second layer contains GridX modules, dijit controls and everything else from Dojo that is used:
'dojo/dojo-all': {
include: ["dojo/on", "dojo/dom-attr", "dojo/dom-class", "dojo/query", "dojo/_base/lang", "dojo/request/xhr", "dojo/parser", "dojo/_base/connect", "dojo/DeferredList", "dojo/store/Memory", "dojo/store/Observable",
"dijit/registry","dijit/form/TextBox", "dijit/form/Textarea", "dijit/form/ComboBox", "dijit/form/FilteringSelect", "dijit/form/CheckBox", "dijit/form/Button",
"gridx/core/model/cache/Sync", "gridx/Grid", "gridx/modules/SingleSort", "gridx/modules/ColumnResizer", "gridx/modules/Pagination", "gridx/modules/pagination/PaginationBar", "gridx/modules/CellWidget", "gridx/modules/Edit", "gridx/modules/Persist", "gridx/modules/Filter", "gridx/modules/filter/FilterBar", "gridx/modules/filter/QuickFilter", "gridx/modules/HiddenColumns"],
exclude: ['dojo/dojo', 'dojo/domReady', 'dojo/_base/declare'],
boot: true,
customBase: false
},
The application starts correctly, and it makes only a request to layered resources, however there is an error in FireBug console:
Error: defineAlreadyDefined
makeError()
dojo-all.js (Zeile 28)
I think this is because the declare module is loaded twice: first with dojo.js bootstrap, defined from HTML file. Second, from dojo-all.js layer, loaded dynamically via require.
There must be some flow in my approach based on cited article, or the article is adapted to the older version of Dojo (I'm using version 1.9).
What is the error here? How should the layers be correctly defined? How can I instruct dojo build not to overwrite the dojo.js bootstrap? Or the exclude is not correctly declared - if so, how should it be declared?
Setting boot: true causes the loader to be included. Only set boot: true on the layer that you want to include the define function.
I am working on my first project which uses a dojo 1.7.2 component, and only need a vertical slider widget. I was able to create a custom build which is supposed to include only the modules needed for my stated dependencies. Using the following build profile, and the command C:\dojo-release-1.7.2-src\util\buildscripts>build -p profiles/km.admin.dashboard.profile.js -r the resulting release/dojo/dojo.js.uncompressed.js is 796kb, and the release/dojo/dojo.js is 236kb. Is there any way to exclude more unneeded modules to reduce the file size? For instance, I just opened the release/dojo/dojo.js.uncompressed.js and took a quick look, there is a dojo/json package, I am not using any json. How do I exclude it? Thank you.
dependencies = {
layers: [
{
name: 'dojo.js',
customBase: true,
dependencies: [
'dojo/dojo',
'dojo.aspect',
'dojo/selector/acme',
'dojo/cldr/nls/number',
'dijit.form.VerticalSlider',
'dijit.form.VerticalRule',
'dijit.form.VerticalRuleLabels'
]
}
],
staticHasFeatures: {
'dojo-trace-api':0,
'dojo-log-api':0,
'dojo-publish-privates':0,
'dojo-sync-loader':0,
'dojo-xhr-factory':0,
'dojo-test-sniff':0
},
prefixes: [
[ 'dijit', '../dijit' ],
[ 'dojox', '../dojox' ]
]
}
There are some approaches by which you can trim down dojo.js to a bare minimum and keep adding the modules within dojo.js that you really need.
See:
http://dojotoolkit.org/reference-guide/1.7/build/customBase.html
and also:
http://www.sitepen.com/blog/2008/07/01/dojo-in-6k/ (this is somewhat old and cutombase approach in the first link might work better)
Allright, he is the thing. I am using curl.js for my AMD loader, but i don't like much of "cram" because it needs to be run on unix and i am developing on Windows. So the r.js adapter for nodeJS from RequireJS library comes in mind, because node has already binary for Windows.
Now jQuery in current version (1.6.4) is not valid AMD module (coming in version 1.7) and there is dependencies in jQueryUI components, so i had to fake like this:
curl( [js!Core/jquery.js] )
.then( function() {
define('jquery', function() { return jQuery; });
})
My application is happy with this. However using r.js (version 0.26.0) fails on this part with following error:
Tracing dependencies for: boot
function (){return jQuery}
node.js:207
throw e; // process.nextTick error, or 'error' event on first tick
^
ReferenceError: jQuery is not defined
at eval at <anonymous> (r.js:7468:30)
at main (r.js:770:33)
at callDefMain (r.js:840:18)
This is my app.build.js
({
appDir: '../',
baseUrl: 'Scripts/',
paths: {
'link': '../../../Lib/#Javascript Libs/curl.js/src/curl/plugin/link.js'
},
dir: 'built',
optimize: 'none',
modules: [
{ name: 'boot' }
]
})
And here is complete boot.js for reference (coffeescript):
require([
'link!styles/main.css'
'js!Core/jquery.js!order'
'js!Core/underscore.js!order'
'js!Core/backbone.js!order'
]).then ->
define 'jquery', -> jQuery
.next(['Router/MainRouter'])
.then (MainRouter) ->
new MainRouter()
Backbone.history.navigate('home') unless Backbone.history.start(
pushState: false
)
Thank you in advance for any hint where the catch can be...
Correct. RequireJS uses a different syntax on its global requirejs() (aka require()) function. RequireJs also doesn't have the "js!" plugin built-in. You may have to include a path to it in your config. You could also use RequireJS's syntax for non-module javascript files.
Also: cram 0.2 will support Windows environments using Rhino. We're writing tests for cram 0.2 and will be releasing it shortly.
RequireJS syntax (remove js! prefix and include .js extension):
require([
'link!styles/main.css'
'order!Core/jquery.js'
'order!Core/underscore.js'
'order!Core/backbone.js'
], function (maincss, jQuery, underscore, backbone) {
// do something here
});