I'm following John Papa's Style Guide and am having problems getting all of my Jasmine specs to load after everything else. The problem is that the directory structure of my app is flat, and thus the spec files are included in the same directory as the files they are testing.
files: [
'app/vendor/js/jquery.js',
'app/vendor/js/angular.js',
'app/vendor/js/*.js',
'bower_components/angular-mocks/angular-mocks.js',
'app/app.js',
'app/app.constants.js',
'app/app.config.js',
'app/**/*.app.js',
'app/**/*.js',
'app/**/*.spec.js',
'app/**/*.html'
]
The other problem is that in the Karma configuration file, it's including all of the .spec.js files in with the plain old .js files. So the second to last string in the above array is redundant, but it's there to illustrate what I am trying to do.
How do I get my spec files to load after all of the other JavaScript files?
EDIT: By following JP's style guide, your files should be named with a chaining syntax: the.directive.js, the.directive.spec.js. So, you can solve my problem by just including all all directives (.directive.js), controllers (.controller.js), etc. before the specs instead of using the universal .js. However, I want to see if someone comes up with a more robust solution.
Try with
files: [
'app/**/!(*spec).js',
'app/**/*spec.js',
...
]
Related
I'm looking for webpack plugin or other solution to move files from one folder to another on afterEmit phase.
There are several plugins that doesn't fit in my case.
https://github.com/kevlened/copy-webpack-plugin
Can copy but not actually move. Source files should be removed.
https://github.com/gregnb/filemanager-webpack-plugin
Can't move files via wildcard. It uses node-mv package under the hood. So I can't use following config:
...
move: [
{ source: './dest/assets/*.map', destination: './dest' },
]
...
Another downside of filemanager-webpack-plugin is it doesn't update webpack internal assets state. It means that moved files can't be served by webpack.
Is there are any other ready to go solutions?
You can try building your own piece of code that does exactly what you need, using webpack compiler hooks. I know this is not a "ready to go solution" but sometimes searching for plugins takes more time than actually writing your own code, especially if it's a simple task.
I have been researching the ability to minify an ExtJS application without Sencha and the closest I have come to is this link:
Is there a way to minify an ExtJS application without Sencha CMD?
However, I am not sure how to execute the file in one of the later comments. I am using the minify-maven-plugin with com.samaxes.maven and the CLOSURE engine. I was able to generate the minified js file of the entire project but I get errors when I try to load the web page.
I was able to verify the web page was calling the correct file. I received the error "TypeError: q is undefined"...not helpful at all. Without the minified file, the web application runs perfectly. So, the generated minified file must have something wrong with it.
The suggestion at the bottom of the link above indicates the sequence of files that I should include but I have no idea how to actually implement this. Also, there are probably over a hundred javascript files that need to be minified so I would rather not have to type each file in the jsb file.
Are there any suggestions on how to minify my entire project at build time with maven?
I'm using Grunt to build the project, but it doesn't really matter as all you need is to combine files, so maven should be more than capable.
I wanted my dev version to still rely on Extjs dynamic class loader so I don't have to rebuild the project whenever I modify one file, and only production version to be minified into a single file. There were a few pitfalls before I got it working, here is what I ended up with. Also this is for ExtJS6, but it probably still should be the same.
It is all controlled by backend variable dev, which when set to false will use minified sources.
index.html (I'm using some meta templating language as example)
<html>
<head>
{{if dev}}
<script src="/ext/ext-all-debug.js"></script>
{{else}}
<script src="/ext/ext-all.js"></script>
{{/if}}
<script>
var dev = {{dev}};
Ext.Loader.setConfig({enabled: dev});
</script>
{{if dev}}
<script src="/app.min.js"></script>
{{else}}
<script src="/app.js"></script>
{{/if}}
</head>
<body></body>
<html>
app files, requires directive doesn't work well when the dynamic loader is disabled, so I had to add conditions like this everywhere:
Ext.define('MyApp.view.Panel', {
extend: 'MyApp.view.GenericPanel',
requires: dev ? [
'MyApp.view.AnotherView',
] : [],
...
});
Gruntfile.js (if you need only concatenation replace uglify with concat everywhere)
module.exports = function(grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
uglify : {
build: {
files: {
'../app.min.js': ['../app/view/GenericPanel.js', '../app/**/*.js', '../app.js'],
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', [ 'uglify' ]);
};
grunt's project.json:
{
"name": "My App",
"version": "1.0.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-uglify": "^1.0.1"
}
}
The order of files matter, by default grunt will use alphabetic order. If you extend some class, the parent class has to be included higher. app.js should be at the end. Other than that it is working well in a single mixed file, so I didn't have to customize the file order further. Grunt has pretty powerful path patterns, so if you need to make sure some file is included first you just list it before other path patterns and it will be smart enough to not include it twice.
I recommend you start with simple concatenation without minification, and only if that works try minifying it. When minifying you might need to be careful with global functions and variables as they can be renamed if minifier is too aggressive. Grunt's minifier almost worked for me with the default settings, I just had to made couple small changes to my code (related to global functions).
While I am not sure why you would want this, the main thing you need is the so-called dependency tree - which tells you the order in which to include the source files.
Then you can put all the files (ExtJS source, libraries if applicable and also your own views) into one big file, in the correct order. This file should then work exactly as the 500 distinct files. (It did for me.)
That done, you can search for a working minifier. Not every minifier can minify ExtJS code, and I don't remember my last results before we finally decided to switch to Sencha Cmd, but I think Microsoft Javascript Minifier was one that worked for us.
Apart from that, minified JavaScript is really legible. You should provide the source of the error, with 200 characters before and 200 characters after the error, and I guess someone here can tell what's going on there.
I'm working on a Node JS (+Express) project in Visual Studio Code, and am wondering if there is a way to reference TypeScript definitions in one global spot, rather than having to re-reference definitions in every JS file.
I see that VSCode supports tsconfigs, but I don't think .tsconfig files have a section for that.
In some editors you can use the filesGlob property in tsconfig.json to simplify references.
For example:
"filesGlob": [
"./scripts/*.ts",
"!./node_modules/**/*.ts"
]
However, this will work with the TypeScript compiler only when TypeScript 2 is released (see globs):
Or you can specify individual files:
"files": [
"./scripts/app.ts",
"./scripts/other.d.ts"
]
Okay so after a couple of restarts with Code, it seems that most of the time it will pick up the typescript definitions that you've included in other files.
I think I'll still go with Steve's answer though, as that way I can avoid having a bunch of references in my code.
I am using Karma to test my JavaScript and get coverage reports. I am using the Istanbul coverage report, which is the default. Here is my preprocessors parameter:
preprocessors: {
'framework/**/*.js':'coverage',
'framework/*.js':'coverage',
'!framework/node/**/*.js':'coverage',
'!framework/test/**/*.js':'coverage',
'framework-lib/**/*.js':'coverage',
'!framework-lib/tool-data-api/tool-data-api.js':'coverage'
}
As you can see, I am trying to use the "!" as a negate command, which usually works with Node. However, it is not working here and none of my directories are being excluded.
Is there any way to do what I am trying to accomplish?
According to https://karma-runner.github.io/0.12/config/configuration-file.html:
**/*.js: All files with a "js" extension in all subdirectories
**/!(jquery).js: Same as previous, but excludes "jquery.js"
**/(foo|bar).js: In all subdirectories, all "foo.js" or "bar.js" files
So, based on this, I tried the following:
preprocessors: {
'framework/**/!(node|test)/*.js': 'coverage',
'framework-lib/**/!(tool-data-api).js': 'coverage'
}
Which seems to have accomplished what you are looking for.
As a note to others who come here looking for how to target all files EXCEPT .spec.js files, try:
'**/!(*spec).js'
Which seems to work for me.
In the Karma used minimatch.js lib for mathing files.
So you need rewrite you rules.
For instance to exclude folder node node it should has
preprocessors: {
'framework/*[!node]/*.js':'coverage',
}
I'm not sure if you are running "istanbul cover ..." to run your coverage report, but if you are, you can use the -x flag to exclude files/patterns. Typing in "istanbul help cover" will show you usage including this.
-x <exclude-pattern> [-x <exclude-pattern>]
one or more fileset patterns e.g. "**/vendor/**"
Make sure that the directories / file you want to exclude are not loaded by any other include. for example, 'framework//.js':'coverage' will load files you are trying to exclude in '!framework/node//.js':'coverage'
you can modify in angular.json under test->options
"codeCoverageExclude": ["src/testing/**/*"]
I'm thinking about using require.js and it's optimzier to combine and minify a library that consists of more then one js-file. Every js-file contains one single module. But there is no main-module that requires (imports) all modules/js-files.
I want to combine all files in one file, that could be used as a library. In that way I could ship the library in one single file instead of several files.
Is this possible, or do I have to create some kind of a main-module that requires /imports all other modules?
Thanks for your help!
treeno
I've not tried it myself but you should be able to pass a build configuration to r.js that contains the following:
modules: [{
name: "my-lib.js",
create: true,
include: ["moduleA", "moduleB", ...]
}]
This tells r.js to put into a single file named my-lib.js all of the dependencies listed in include and tells it that there is no corresponding file named my-lib.js in your sources but that r.js should create it in the output. So the key is:
List all the modules you want in include.
Use create: true.
The documentation on the optimizer does not mention create but you can find it documented here.