Due to a FUBAR directory organization in a project, I have spent some time re-organizing JS scripts on said project. The project uses requirejs and was functioning wonderfully before the re-org. However, now nothing loads when called or compiles (we use the r.js optimizer) when run -- though compiling completes without complaint. I have checked, double-checked, triple-checked, and now given in to asking for another set of eyes here on Stack Overflow.
Using RequireJS: 2.1.4 and r.js 2.1.4
The following is my configuration:
build-js.js (used for optimizer)
var requirejs = require('requirejs');
var config = {
baseUrl: './public/js',
mainConfigFile: './public/js/config/config.js',
paths: {
'requireLib': 'library/require'
},
out: ".public/js/minified/main.js",
name: "minified/main",
wrap: false,
preserveLicenseComments: false,
deps: ["app/main","modules/movie","modules/theatre"]
};
requirejs.optimize(config);
config.js
// Set the require.js configuration for your application.
require.config({
paths: {
// JavaScript folders
libs: "library",
plugins: "plugin",
app: "app",
adminlibs: "../adminassets/js/plugins/ui",
// Libraries
jquery: "library/jquery",
jqcookie: "library/jquery.cookie",
jqui: "../adminassets/js/plugins/ui/jquery-ui-1.10.0.custom.min",
jqezmark: "library/jquery.ezmark",
jqcolor: "library/jquery.color",
underscore: "library/underscore-amdjs",
backbone: "library/backbone-amdjs",
chosen: "library/chosen.jquery",
moment: "library/moment",
// Site Components
site: "app/site",
sitediscussion: "app/site-discussion",
namespace: "app/namespace",
// Plugins
text: "plugin/text",
async: "plugin/async",
use: "plugin/use",
datetimepicker: "../adminassets/js/plugins/ui/jquery.datetimepicker",
ajaxfileupload: "../adminassets/js/plugins/uploader/jquery.ajaxfileupload"
},
shim: {
'chosen': ['jquery'],
'jqcookie': ['jquery'],
'jqui': ['jquery'],
'jqezmark': ['jquery'],
'jqcolor': ['jquery'],
'site': {
deps: ['jquery','jqezmark','chosen','underscore','namespace','jqui','jqcookie'],
exports: 'site'
},
'sitediscussion': {
deps: ['jquery', 'underscore'],
exports: 'sitediscussion'
},
'jquifull' : ['jquery'],
'datetimepicker' : ['jqui'],
'ajaxfileupload' : ['jquery'],
'backbone': ['underscore','jquery']
},
// Initialize the application with the main application file
deps: ["app/main"]
});
File structure is as follows:
{site-root}/public/js
Which contains directories:
app
config
library
minified
modules
plugin
templates
All files listed above in build-js and config.js are confirmed to be in the expected folders.
requirejs is called as follows:
On dev machines (which I'm currently testing the setup on):
data-main="/js/config/config" src="/js/library/require.js"
On production (currently the minified/main file is not even being created, though it should be)
data-main="/js/minified/main" src="/js/library/require.js"
Can anyone see what I may be doing wrong? Again, there have been no changes to the site proper, the javascript, etc except in the two files (build-js.js and config.js) listed above. The only changes are that files have been physically moved in the directory structure. As a result, I'm nearly positive that I have a pathing issue somewhere, but I cannot seem to find it. Help?
Resolution has been found. I was referencing my configuration file through the data-main attribute in the requirejs include script tag at "/js/config/config". Though I declared a base-path of /public/js, the system was still attempting to use /js/config/ as my base path ( as stated in requirejs documentation that it will base-path based off your data-main attribute if a base path is not otherwise declared ). I moved my config.js file to /js and changed data-main to /js/config and now all paths are working appropriately, referencing base-path /js.
A side-note is that I did not notice the failure of files to load because of my use of Zend Framework and error handling. There were no 404 Errors and the Network tab of my dev-tools showed success in loading all .js files ... it was only when I looked at the response-content of those files that I found they were spitting out PHP error logs rather than .js content.
Related
When running an application that is built using webpack 2, sourcemaps are detected in chrome but original source is not loaded.
I'm using webpack beta21.
These files used to be detected automatically, ie when a breakpoint was put in the the output from webpack js file, the source view would jump to the original source input to webpack. But now I am stuck with this screen:
config:
var path = require("path");
var webpack = require("webpack");
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
const PATHS = {
app: path.join(__dirname, '../client'),
build: path.join(__dirname, '../public')
};
module.exports = {
entry: {
app: PATHS.app + '/app.js'
},
output: {
path: PATHS.build,
filename: '[name].js'
},
devtool: "source-map",
module: {
loaders: [
{
test: /\.js?$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, 'client'),
],
exclude: /node_modules/
},
{
test: /\.css/,
loader: "style!css"
}
]
},
resolve: {
// you can now require('file') instead of require('file.js')
extensions: ['', '.js', '.json']
} ,
plugins: [
new WebpackBuildNotifierPlugin()
]
};
Generated files with source maps won't automatically redirect to their original files, because there's potentially a 1-to-many relationship.
If you see the message Source Map Detected, the original file should already appear on the side file tree or the file explorer via Crl + P. If you don't know the original file name, you can open the source map file itself.
The source map path can be identified by a //# sourceMappingURL= comment or the X-SourceMap header:
Open up the source map via url and look for the sources property for the original file name:
The original file should be visible in the sources panel:
If you don't see the message Source Map Detected
You can manually add an external source map by right clicking and selecting Add Source Map:
Additional Resources
If that still doesn't work, you can try a Source Map Validator
For webpack specifically, you can configure the devtool property
If you're mapping to a workspace, that means you already have the source code. Including the source code in your source map is creating an unnecessary redundancy.
Use nosources-source-map instead.
The issue with external source maps was fixed in Chrome 52 but it looks like you've got your devtool set differently from mine, I use:
devtool: '#source-maps'
How are you building your source? If you're running with -d it will switch to inline source maps
Question Part 1
In my current setup, I have a folder that looks like this:
/wwwroot <-- Hosted in localhost
/_project <-- Contains gruntfile.js
/_dev <-- Contains Source Code
The wwwroot folder is hosted in XAMPP and open in my browser. The _project folder contains my gruntfile.js, and _dev contains all the JS and SCSS that is compiled into JS and CSS by Grunt.
This has worked fine for a year or two, but recently, I updated my packages, and the generated sourcemaps have begun breaking. Chrome shows a blank code panel in Sources, and Firefox Dev displays a 404 error's HTML in the sources code panel. The sources were now being looked for inside the /wwwroot folder. Because of this, the sources 404 and aren't shown, and I can't use sourcemap debugging which I rely on.
Relevant parts of Gruntfile:
uglify: {
common: {
options: {
mangle: false,
compress: true, // true or false or {}
preserveComments: 'all', // true or 'all' or 'some'
sourceMap : true
},
files: {
// '../wwwroot/Content/includes/js/libs.js': ['../_dev/js/common/libs/*.js'],
'../wwwroot/Content/includes/js/buildbar.js': ['../_dev/js/common/buildbar/*.js'],
'../wwwroot/Content/includes/js/framework.js': ['../_dev/js/common/framework/*.js'],
}
},
}
Short of painfully rearranging my directory structure... how can I fix this?
Question part 2:
I've tried using grunt-uglify-contrib's sourceMapRoot option as follows:
uglify: {
common: {
options: {
mangle: false,
compress: true, // true or false or {}
preserveComments: 'all', // true or 'all' or 'some'
sourceMap : true,
sourceMapRoot: "C:/Users/quint/Documents/Github/build-siteengine/a/a/a/a"
},
files: {
// '../wwwroot/Content/includes/js/libs.js': ['../_dev/js/common/libs/*.js'],
'../wwwroot/Content/includes/js/buildbar.js': ['../_dev/js/common/buildbar/*.js'],
'../wwwroot/Content/includes/js/framework.js': ['../_dev/js/common/framework/*.js'],
}
},
}
For some reason, though, the paths that show in the Sources panel in Firefox Dev are missing four directories, hence why I've added the /a/a/a/a. Why would this be happening?
This also doesn't solve my problem, since in Firefox Dev clicking on the line numbers open the file in the browser and don't take me to the line of code in the debugger, and in Chrome there is no effect.
I'm trying to debug an application written in Angular 2 build from webpack with VScode. I'm able to use the debugger for chrome extension in VSCode to attach my application. And it did hit the break point of the compiled js file. But it cannot find the sourcemap files.
It seems that webpack will have a webpack:// to host the files which the *.js file pointed to, like in the image:
And I can set the breakpoint inside the ts files inside webpack folder. However vscode is not able to find the ts files. So I change the configuration of webpack to
output: {
path:root('__build');
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
And then all files seemed to map to the absolute paths of the original ts files. And in chrome developer tool it looks like this:
But both chrome and vscode said the files inside this file:// is different from the original ts files. So I'm wondering whether there's a way that in webpack's configuration could make *.js file sourcemap to original ts files. And here's all my configurations:
typescript configuration:
{
"compilerOptions": {
"outDir": "dist",
"target": "ES5",
"module": "commonjs",
"sourceMap": true
}
}
webpack config:
{
entry: "./src/app/bootstrap",
output: {
path: root('__build__'),
filename: env({
'development': '[name].js',
'all': '[name].[hash].min.js'
}),
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
devtool:'source-map',
devServer: {
contentBase: "public/"
}
}
Another thing is that if in chrome developer tools, if I add the original files into the workspace and map the files from file:// to this folder, I can actually set breakpoints inside these files. So I'm wondering there's a way to map to local resources in vscode.
I changed this:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
to this:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+encodeURI(info.absoluteResourcePath);
}
},
and now it encodes the spaces properly, and the sourcemap file works as expected.
Thanks to Rob Lourens, this problem is caused by spaces and other special characters in the file path that may break sourcemaps.
I'm using gulp-durandal to build our durandal app. It fails on our first module which has a depeendecy to knockout through:
define(['knockout',....
[09:35:27] Durandal Error: ENOENT, no such file or directory 'C:\xxxxx\app\knockout.js'
In module tree:
company/viewmodels/edit
at Object.fs.openSync (fs.js:438:18)
I have knockout defined as a patch in config.js (standard requirejs way) but it seems gulp-durandal does not resolve paths from config.js ?
'knockout': '../Scripts/lib/knockout/knockout-2.3.0',
How do you get gulp-durandal to use our config paths instead of trying to resolve the modules directly under the app folder ? I tried using options.extraModules but that only allows you to add paths to modules, not symbolic names for the module so that doesn't seem to be the correct way.
The basic structure of my durandaljs app follows the standard guidelines I believe, I have a config.js and main.js under the App folder.
My config.js:
define([], function() {
return {
paths: {
'text': '../Scripts/lib/require/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
My main.js
require(['config'], function(config) {
require.config(config);
require(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/widget', 'custombindings'],
function(system, app, viewLocator, widget) {
..... app code here.....
}
gulpfile.js:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
require(['App/config'], function(config){
console.log('loaded config');
});
gulp.task('durandal', function(){
durandal({
baseDir: 'app', //same as default, so not really required.
main: 'main.js', //same as default, so not really required.
output: 'main.js', //same as default, so not really required.
almond: true,
minify: true,
require:true
})
.pipe(gulp.dest('dir/to/save/the/output'));
});
I guess the question is how do I load my config.js paths into gulp so the paths are resolved correctly ? I tried:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
require(['App/config'], function(config){
console.log('loaded config');
});
But it seems require only wants a string as input (I guess require function in gulp != require from require.js)
I believe the issue is that your gulp-durandal task needs configuration to mimic the config.js file. If you need further assistance please provide more code from your gulp-durandal task.
How should I be using requirejs-text which is installed via bower? I am supposed to put it in baseUrl but wonder if I could use it from components/requirejs-text/? Whats the best practice?
Define the path to the plugin in the config:
requirejs.config({
paths: {
"text" : "components/requirejs-text/text"
}
},
And use it in your module as documented on https://github.com/requirejs/text:
require(["some/module", "text!some/module.html", "text!some/module.css"],
function(module, html, css) {
//the html variable will be the text
//of the some/module.html file
//the css variable will be the text
//of the some/module.css file.
}
);
You can use also technically use the plugin without the path definition in the requirejs.config, but this is propbably not best practice:
require(["your_path_to_the_plugin_from_baseurl/without_js_at_the_end!some/textfile"],
function(yourTextfile) {
}
);
in PROJECT_APP/bower.js add this line under the dependencies section:
"requirejs": "~2.1.8",
"requirejs-text":"~2.0.10", // this is new
"qunit": "~1.12.0",
then run bower install, it should install this plugin and display at the end a path such as requirejs-text#2.0.10 vendor/bower/requirejs-text (depends on your configuration).
Finally, in the config.js file, add this line under
require.config({
paths: {
// Make vendor easier to access.
"vendor": "../vendor",
// Almond is used to lighten the output filesize.
"almond": "../vendor/bower/almond/almond",
// add the requirejs text plugin here
"text" : "../vendor/bower/requirejs-text/text",
// Opt for Lo-Dash Underscore compatibility build over Underscore.
"underscore": "../vendor/bower/lodash/dist/lodash.underscore",
// Map remaining vendor dependencies.
"jquery": "../vendor/bower/jquery/jquery",
"backbone": "../vendor/bower/backbone/backbone"
}
});
Then to use it, simply require it, in this case you can access it with the template variable
define([
// These are path alias that we configured in our bootstrap
'app', // general app variables
'jquery', // lib/jquery/jquery
'underscore', // lib/underscore/underscore
'backbone', // lib/backbone/backbone
'text!templates/books.html' // use the plugin to import a template
], function(app,$, _, Backbone, template){ // don't forget to define it !
This is how I have install requirejs-text using bower
In your project's bower.json file:
{
"name":"{{YOUR PROJECT NAME}}",
"version":"{{YOUR PROJECT VERSION}}",
"dependencies":{
"requirejs-text":"2.0.6"
}
}