I have a script that does some analysis on my source files and a part of that analysis is to require the file. Some of the files are in JSX format however and node does not understand this by default.
Is it possible to make it so that a file that looks like this:
function MyModule () {
return <div>hello</div>
}
module.exports = MyModule
is possible to require through require('./my-module')?
Use JSX as a template engine in Node
NPM Package : https://www.npmjs.com/package/jsx-node
To be able to simply require .jsx files, you need to tell Node what to do with them. Running the following code makes you able to require('./SomeFile.jsx'):
require('jsx-node').install({
replace: {
preact: 'jsx-node',
}
});
Warning:
This module is still in a very early phase. Any production use should be approached with caution.
For more Detail visit Link.
Background:
I'm working on a chrome extension. I used the yeoman generator. It worked like a charm. After I deployed the extension, I needed to debug a few issues.
Problem:
The code is uglified. I can't set break points. I can hardly read it. It is also optimized. This makes it hard to read as well. I would like to tell Grunt to skip uglifying the code.
Attempted Solutions:
I tried to comment out the uglify task in the Grunt file. If I do this, not only is uglify not executed, but most of the scripts fail to copy into the "dist" directory.
I can deploy the application from the "app" directory. If I do this, my human written code is loaded rather than the "dist" values. While this works, I wish to learn more about the inner workings of Grunt. It seems likely that there is some mechanism by which uglifying may be disabled while preserving copying.
It's the usemin task that supplies targets to the uglify task. When you comment out the uglify task usemin can't complete its flow (by default concat and uglify) and the scripts never get copied.
So you must configure the flow in useminPrepare options. Like this:
[...]
useminPrepare: {
options: {
stripBanners: true,
dest: '<%= config.dist %>',
flow: {
steps: {
js: ['concat'], css: ['concat', 'cssmin']
},
post: {}
}
},
[...]
This way you can remove the uglify task from the build sequence (you must, as it will complaint that have no targets and fail).
Documentation here: https://github.com/yeoman/grunt-usemin#flow
I'm using Backbonejs with RequirejS to create an application and used
Grunt as a build tool. Minified files were generated using grunt task "grunt-requirejs".
After that I implemented MarionetteJs for using the marionette modules and after implementing marionette modules in the application, the problem started occurring in Grunt build process. When i'm running the application with minified file, i'm getting error
"uncaught Error: undefined missing modules/main/mainApp"
mainApp.js is my main module which would govern the other modules.
Code snippet
app.js -
define([ 'marionette' ], function(Marionette) {
var MainApplication = new Marionette.Application();
MainApplication.on("start", function(){
if(Backbone.history){
require(['modules/main/mainApp'], function (MainApp) {
Backbone.history.start();
MainApp.start();
});
}
});
return MainApplication;
}
I googled a lot about this question but couldn't find a concrete solution.
Do i have to include any other task for minifying the marionette files?
Also i came up with this blogpost , which confuses whether to used Requirejs with Marionette modules.
Any suggestions/approach for checking the marionette files are minified and are working correctly would be really helpful.
Edit:
Added code snippet.
I got the solution. It was just simply adding one more option to the optimization task.
In my grunt task
requirejs: {
compile: {
options: {
findNestedDependencies: true,
// Edited for brevity
}
}
},
I added findeNestedDependencies : true and it actually picked up the nested dependencies.
I got the reference from David Sulc's book for RequireJS, BackboneJS and Marionette. In this book he was optimizing the application with RequireJS optimizer and then i found that attribute in the build.js file.
Trying to get karma working with requirejs. I don't understand why I am getting all of these errors when running Karma:
ERROR: 'There is no timestamp for /base/test/mainSpec.js?bust=1387739317116!'
ERROR: 'There is no timestamp for /base/app/main.js?bust=1387739317116!'
ERROR: 'There is no timestamp for /base/bower_components/jquery/jquery.js?bust=1387739317116!'
When I go to the network tab in inspector, all of the files are there with no 404s.
I'm a little confused because karma seems to be looking for a 'base' directory but there is no 'base' directory in my project. According to the karma docs:
Karma serves files under the /base directory. So, on the server
requests to files will be served up under
http://localhost:9876/base/*. The Require.js config for baseUrl gives
a starting context for modules that load with relative paths. When
setting this value for the Karma server it will need to start with
/base. We want the baseUrl for our tests to be the same folder as the
base url we have in src/main.js, so that relative requires in the
source won’t need to change. So, as we want our base url to be at
src/, we need to write /base/src.
This confusing to say the least. Am I supposed to have a baseUrl configuration in my main.js file that points to '/base'?
note: This post was valid by Karma in 2014 Jan 16. I am not certain of the current state of that lib, maybe they fixed their weird configuration logic and added meaningful error messages. If not, then this post can be probably very helpful by fixing configuration issues related to Karma.
These kind of errors occur by misconfiguration. You should add everything your test uses to the file patterns in your config file.
For example:
module.exports = function (config) {
config.set({
basePath: './',
frameworks: ['jasmine', 'requirejs'],
files: [
{pattern: 'test/bootstrap.js', included: true},
{pattern: 'test/**/*.js', included: false},
{pattern: 'src/**/*.js', included: false},
{pattern: 'vendor/**/*.js', included: false}
],
exclude: [
],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Firefox'],
captureTimeout: 6000,
singleRun: false
});
};
In this example the bootstrap.js is the only file included by Karma in the HTML, the other files are dependencies which are loaded by the code in the bootstrap.js. The pattern order is very important and sadly it is far from logical: the next pattern does not override the previous one. So if I'd give the test/**/*.js pattern as first and test/bootstrap.js as second, it would not work because the bootstrap would not be included. In these cases Karma sends you an "empty testsuite" message, which is useless if you don't know how to configure it...
If your tests try to use a file which is not covered by the patterns you gave in your Karma configuration file, then you will get the "There is no timestamp for xy" error message, which is very similar to the previously mentioned "empty testsuite". If you don't know the system you won't have a clue, what it means, or what you have to do in order to fix it ...
The exclude part of the configuration object is for files, which have been added to the file patterns for inclusion, but you don't want to include or use them in your tests. These can be for example requirejs configuration files for development and production environments, etc...
For me it was simply making the mistake of setting basePath: 'base' instead of baseUrl: '/base'.
baseUrl: '/base' ftw!
The basePath is to identify the root of your project relative to the configuration file (karma.conf.js). Take a look at this example: https://github.com/karma-runner/karma/blob/v0.8.5/test/client/karma.conf.js
In the browser, I also got this error about the timestamp but it doesn't affect anything. The tests are working properly. I guess it should be a warning more than an error :-)
Jeff's right, you should exclude the requirejs config file of your app, because "we don't want to actually start the application in our tests. [LINK]".
The test-main.js config file is a separate file from the requirejs config file your app uses, which in your case might be config.js or main.js, depending on where you config your requirejs.
They both configures path and dependencies (could be specifying about the same ones), but the former is to provide requirejs support for the tests you write. This whole requirejs setup is a separate one from the requirejs you use in your app. So don't include the latter, it confuses Karma.
And the link above is a working Karma with its requirejs demo, check it out.
After trying all the solutions posted on different sources, Finally I got it Fixed. Check it here: Make "no timestamp" error configurable #6 .
Example from the issue for the karma.conf.js file:
client: {
requireJsShowNoTimestampsError: '^(?!.*(^/base/app/node_modules/))'
}
in my karma.conf.js file, I simply excluded my file that contained my require.config function (in my case happened to be config.js) and the errors went away.
exclude: [
'app/config.js',
'bower_components/jasmine/**/*.js'
],
This error can also happen when the files in question don't actually exist!
So check to make sure that the file you're getting this error for actually exists in your project!
Once you find out what the files are, you can ignore them using a pattern like so in your karma.conf.js, if it turns out their existence should be ignored in some cases:
exclude: [
'path/to/files/to/ignore/**/*.js'
]
I had an exact same error in my project and I found that the best and fastest way to debug where is the problem is to list the files that our karma have loaded.
If you used karma init (if not, just do it) and respond YES to the question about the usage of RequireJS you probably have a file like this:
var tests = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
var BASE_URL = '/base/build/js';
var BASE_URL_REGEXP = /^\/base\/build\/js\/|\.js$/g;
// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function (file) {
console.log(file;) // ADD THIS CONSOLE LOG TO LIST LOADED FILES
if (TEST_REGEXP.test(file)) {
var normalizedTestModule = file.replace(BASE_URL_REGEXP, '')
tests.push(normalizedTestModule)
}
})
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: BASE_URL,
paths: {
},
shim: {
},
deps: tests,
// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start
})
Then you can play with your karam.conf.js file and load new files to check whats going on in karma local path.
Expanding from #Naruto Sempai's answer:
I resolved this issue by first setting the basePath attribute in my karma.conf.js file. This path contains the needed ../ (previous directory) strings until my path was at the root of my source/test files.
Then I modified my test-main.js file (containing my RequireJS configuration) and set the baseUrl to /base.
Now, no timestamp errors.
--
To illustrate my environment and paths I configured, heres a basic setup example:
Source file location:
/Users/ben/some-project/src/main/resources/var/www/project/js/app
Test file location:
/Users/ben/some-project/src/test/var/www/project/
Karma Config location:
/Users/ben/some-project/src/test/var/www/project/karma.conf.js
Test RequireJS Config location:
/Users/ben/some-project/src/test/var/www/project/test-main.js
My karma.conf.js:
module.exports = function (config) {
config.set({
basePath: '../../../../'
});
}
to make my "root" at /Users/ben/some-project/src/.
My test-main.js:
requirejs.config({
baseUrl: '/base'
});
So I created a project using yeoman init and it uses requirejs, I wish to replace requirejs with almondjs to make it load faster. How can I do this?
AlmondJS is here: https://github.com/jrburke/almond
RequireJS is here: http://requirejs.org/
Yeoman: http://yeoman.io/
The only mention of require.js in Gruntfile.js is:
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name: 'main'
},
Make sure you are using Yeoman 1.0 and not an earlier version. It uses grunt-requirejs which has almond support. rjs was used in versions before 1.0.
See documentation at https://github.com/asciidisco/grunt-requirejs/blob/master/docs/almondIntegration.md. It appears that all you may need to do is add almond: true to the options for requirejs in your Gruntfile (or not depending on what you want to do--again see the documentation).