I'm getting following error when i execute sencha app build
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExBuild: com.sencha.exceptions.ExBuild: Failed to find any files for extjs-build\app\app\Application.js::ClassRequire::Object
extjs-build\app\app\Application.js looks like
Ext.define('PM.app.Application', {
extend: 'Ext.app.Application',
requires: [
'PM.Object'
]
}
A file for class PM.Object exists. The path is: extjs-build\app\Object.js and extends Ext.Object with some extra functions:
PM.Object = Ext.apply(Ext.Object, {
...: function() {}
}
The extjs-build\.sencha\app\sencha.cfg file:
# The path(s) to application javascript sources (comma separated)
app.classpath=${app.dir}/app
My Directory looks like:
/extjs-build/
.sencha/
app/
app/
Application.js
data/
SomeStore.js
app.js
Object.js
ext/
src/
I'm running sencha app build from /extjs-build/
Ext.Loader handles the issue correct (/extjs-build/app/app.js)
Ext.Loader.setConfig({
paths: {
'PM': './extjs-build/app'
}
});
Ext.application('PM.app.Application');
Any suggestions?
Your PM.Object path (extjs-build\app) is outside the build directory of you app (extjs-build\app\app)
I suspect you are running sencha app build in extjs-build\app which means the compiler will look for js files in extjs-build\app\app\ (this is because app.classpath=${app.dir}/app)
In your sencha.cfg you can change the classpath. Or move that file into the extjs-build/app/app directory.
I solved this issue by adding an empty
Ext.define('PM.Object', {
});
in file extjs-build/app/Object.js.
Related
I'm a bit confused by ngtemplate-loader, I'll try to set up a very straightforward config where all my HTML files are located into a templates folder (see the folder structure below). Thus if I have correctly understood the way this module works, I defined the following config:
webpack.config.js
{
test: /\.html$/,
use: [
{
loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, '../templates')),
}
]
}
Folder structure
.
├── app
├── templates
└── ...
When I try to require my templates/root.html from my angular entry point app/main.js with the following command:
const rootTpl = require('root.html');
I get the following error:
ERROR in ./app/main.js
Module not found: Error: Can't resolve 'root.html' in '[__dirname]/app'
I don't understand why it tries to resolve the path of my root.html from /app instead of /templates.
Any idea about what is wrong with my configuration? Maybe I'm missing something obvious.
I'm using angular 1.5.11, webpack 3.10.0 and ngtemplate-loader 2.0.1.
I'm using AngularJS ngBoilerplate and trying to add my module. I placed file mymodule/mymodule.js with code
angular.module( 'mymodule', [] );
in common directory. I added path to file in build.config.js, then add it to app.js dependencies:
angular.module('app', [ ..., 'mymodule'
then run grunt build and got:
Iceweasel 24.7.0 (Linux 0.0.0) AppCtrl isCurrentUrl should pass a dummy test 1 FAILED
minErr/<#/var/www/angular/vendor/bower/angular/angular.js:68
loadModules/<#/var/www/angular/vendor/bower/angular/angular.js:4379
forEach#/var/www/angular/vendor/bower/angular/angular.js:336
loadModules#/var/www/angular/vendor/bower/angular/angular.js:4339
createInjector#/var/www/angular/vendor/bower/angular/angular.js:4265
workFn#/var/www/angular/vendor/bower/angular-mocks/angular-mocks.js:2409
script mymodule.js included in page correctly.
What am I doing wrong?
Are you sure you want to place the nodule in the common directory ? I'm not sure about what you're trying to achieve. However, to get up and running with a custom module in ngbp, I would suggest that you create a new folder under src/app called mymodule. Next create a mymodule.js under the newly created directory. Finally, add your code to the file:
angular.module( 'mymodule', [
....
]);
And add the module to the src/app/app.js
angular.module('app', [ ..., 'mymodule']);
The grunt build should be working at this stage.
I found answer! Adding path mask for my module to karma-unit.tpl.js solve the problem.
Following one of the chapters of "Developing Backbone.js Apllication" by Addy Osmani (O'Reilly) about Grunt-BBB (Backbone Boilerplate Buddy), I just couldn't manage to create a build profile.
Here is the filesystem tree used for this :
/builds
/closure
/rhino
/config
/build.js
build.sh
/development
/* Grunt-BBB files after init */
/app
/styles
index.css
app.js
config.js
main.js
router.js
/test
/* Not important files used for testing */
/vendor
/h5bp
/css
main.css
normalize.css
/jam
/backbone
backbone.js
package.json
/bakbone.layoutmanager
bakbone.layoutmanager.js
package.json
/jquery
jquery.js
package.json
/lodash
lodash.js
lodash.min.js
lodash.underscore.min.js
package.json
require.config.js
require.js
/js
/libs
almond.js
require.js
/distribution
/* Empty dist directory where the optimized / minified / concatenated files should go */
Here are the steps I followed in the /development directory :
1) Install Grunt-BBB (npm install -g bbb)
2) Download r.js, a part of the Require.js project (git clone https://github.com/backbone-boilerplate/grunt-bbb)
3) Initialize the files of the boilerplate (bbb init)
Here is the build.js file I used to configure the r.js AMD loader for the Google Closure compiler :
({
appDir: '../../development',
baseUrl: 'app',
dir: '../../distribution',
optimize: 'closure', // 'uglify2'
paths: {
backbone: '../vendor/jam/backbone/backbone',
'backbone.layoutmanager': '../vendor/jam/backbone.layoutmanager/backbone.layoutmanager',
jquery: '../vendor/jam/jquery/jquery',
lodash: '../vendor/jam/lodash/backbone.min'
},
modules: [
{
name: 'main'
}
],
onBuildRead: function(moduleNames, path, contents) {
return contents;
//return contents.replace(/console\.log\(([^\)]+)\);/g, '')
// .replace(/debugger;/, '');
}
})
and this is the build.sh file I use :
#!/usr/bin/env bash
# r.js directory
RJSDIR="r.js"
RJS="$RJSDIR/dist/r.js"
# Rhino directory
RHINODIR="rhino"
RHINO="$RHINODIR/js.jar"
# Google Closure Compiler directory
CLOSUREDIR="closure"
CLOSURE="$CLOSUREDIR/compiler.jar"
# Build config directory
CONFIGDIR="config"
CONFIG="$CONFIGDIR/build.js"
# Launch compillation
java -Xms256m -Xmx256m -classpath "$RHINO":"$CLOSURE" org.mozilla.javascript.tools.shell.Main "$RJS" -o "$CONFIG" $#
My goal is to optimize, minify, concatenate all the JavaScrit file including the libraries and templates (which I don't have yet, I am only using the boilerplate files) but also CSS files.
The result I get by running ./build.sh is that every files are correctly minimised (besides CSS rule inlining, but that is besides the point) and concatenated but resources that are loaded and managed by the Jam (package manager that combines NPM and Require.js) aren't concatenated.
The reason for that since they are already loaded / managed by Jam, they are not redeclared in the JavaScript files AMD style.
In conclusion, my questions are the following :
How can I rewrite my build.js configuration file so that resources that are loaded by Jam also get included and concatenated in the release / dist file ?
How can I make it so that the concatenated resources aren't copied in the realse / dist directory ? Is it possible to configure this in the build.js file or should this go in my build.sh file ?
Edit : New build.js file :
({
appDir: '../../development',
baseUrl: 'app',
dir: '../../distribution',
optimize: 'closure', // 'uglify2'
paths: {
requirejs : '../vendor/jam/require',
backbone: '../vendor/jam/backbone/backbone',
'backbone.layoutmanager': '../vendor/jam/backbone.layoutmanager/backbone.layoutmanager',
jquery: '../vendor/jam/jquery/jquery',
lodash: '../vendor/jam/lodash/backbone.min'
},
name: 'main',
include: ['requirejs'],
onBuildRead: function(moduleNames, path, contents) {
return contents;
//return contents.replace(/console\.log\(([^\)]+)\);/g, '')
// .replace(/debugger;/, '');
}
})
And here is the error :
file:///vendor/js/libs/require.jsFailed to load resource: The requested URL was not found on this server.
file:///app/styles/index.cssFailed to load resource: The requested URL was not found on this server.
require.js is never included by r.js unless you instruct it to do so. See this link:
http://requirejs.org/docs/optimization.html#onejs
The link refers to command-line options, but the build file options are broadly the same:
you need to define a dummy module for require.js in your paths:
paths: {
requireLib : '/path/to/require.js'
backbone: '../vendor/jam/backbone/backbone',
'backbone.layoutmanager': '../vendor/jam/backbone.layoutmanager/backbone.layoutmanager',
jquery: '../vendor/jam/jquery/jquery',
lodash: '../vendor/jam/lodash/backbone.min'
},
and include it:
name "main",
include: ["requireLib"],
You can ensure that allnested dependencies are resolved by setting:
findNestedDependencies: true,
You can configure an output path using 'out' in your build file
out: "path/to/my/builtfile-1.0.0.js",
Sorry I don't know enough about jam to say whether jam would override this setting
_Pez
I worked along the following tutorial to try to optimize my project into one single .js file, but unfortunately I can't seem to get the expected results. I get r.js to create an optimized folder for me, but instead of a single file, I get uglified copies of each individual .js file in their respective folders. Seems like that last concatenation step is somehow missing.
I'm trying to leverage an existing config file instead of using paths, I don't know if that specific step is breaking it.
My build/app.build.js is:
({
appDir: '../',
baseUrl: 'js',
mainConfigFile: '../js/config.js',
dir: '../../my-app-build',
modules: [{
name: 'main'
}]
})
My main.js file has the config file as its dependency:
require(["config"], function() {
require(['underscore', [...]
[...]
}
}
And the config file is where all of my project dependencies are declared:
require.config({
baseUrl: "js",
paths: {[...]},
shim: {...]},
});
Does anyone have insight into why I might not be getting that single file output that I'm looking for? I tried the other approach in this post, but that only ever produces main.js for me with the config file prepended to it.
Thanks!
The issue was caused by the following option missing from the r.js build configuration file:
findNestedDependencies: true
Without it, r.js would not go past the first require in main.js, thus loading only config.js and none of the next level of dependencies. Just for reference (note that it saves the product of optimization in the same source folder, which is not ideal) looks like this:
({
baseUrl: '.',
mainConfigFile: 'config.js',
name: 'main',
out: 'main-build.js',
findNestedDependencies: true,
})
I had the same problem and got the solution from the Github Issue list. May be this configuration parameters will help you too
https://github.com/jrburke/r.js/issues/379
If you only want one JS file built, instead of using dir: use out: for a single JS file build.
Specify output filepath:
({
// ...
out: '../main.min.js'
})
I have generated a project using Sencha cmd. This creates a nice folder named 'overrides' where I have put my overridden Ext.Ajax class. I then include it in my app.js file like so
requires: [
'overrides.Ajax'
]
This works just fine when using my app, however when I try to build it using Sencha cmd I get the following error:
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.BasicException: The following error occurred while e
xecuting this line:
[ERR] Z:\public_html\LoginScreen\.sencha\app\build-impl.xml:469: com.sencha.exce
ptions.ExBuild: com.sencha.exceptions.ExBuild: Failed to find any files for Z:\p
ublic_html\LoginScreen\app\app.js::ClassRequire::overrides.Ajax
Does anyone know how to properly include files that are inside the overrides folder?
Turns out I needed to edit the .sencha/app/sencha.cfg file, adding the following to the end of the app.classpath
,${app.dir}/overrides
Thanks to Mitchell over at the official Sencha forums for helping me out!
http://www.sencha.com/forum/showthread.php?261361-Properly-using-the-overrides-folder-generated-by-Sencha-Cmd-for-Ext-Js-4.2
For Ext 5 user, you can specify "overrides folder" in app.json. Example:
"overrides": "${app.dir}/overrides",
You probably need path defined in your loader config for overrides.
Something like this:
Ext.Loader.setConfig({
paths: {
'Ext.ux': 'js/extjs/ux',
'overrides' : 'somepath/to/overrides',
'Skirtle.CTemplate':'js/extjs/ux/SkirtleCTemplate.js' //<-- specific component
}
});
For me just the
requires: [
'overrides.Ajax'
]
didn't work I had to add
requires: [
'MyApp.overrides.Ajax'
]
And it worked :)
Also the vars
// #require #packageOverrides
// #require #appOverrides
don't do anything for me, so the steps are
add the ,${app.dir}/overrides in the sencha.cfg
add the requires in the app.js inside the Ext.application
Tested in Sencha Cmd v4.0.2.67