This should be a pretty easy one, but I haven't been able to find any solutions.
I need to include the following in my source code:
<script type="text/javascript" src="bower_components/MathJax/MathJax.js?config=AM_HTMLorMML-full"></script>
The ./config/am_htmlormml.js file is loaded by MathJax to render formulas written in ascii. The code runs and works fine, but I would prefer to use Bower. When I install MathJax via bower, I get:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
...
<script src="bower_components/MathJax/MathJax.js"></script>
...
<!-- endbower -->
<!-- endbuild -->
But I am unsure of how best to add ?config=AM_HTMLorMML-full1, or make sure the ./config/am_htmlormml.js file is loaded.
You can specify it in the config key when you configure MathJax. Note that my example uses a different config than yours (b/c this config worked with my example MathML).
<!doctype html>
<title>MathJax Bower Example</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
config: ["TeX-MML-AM_CHTML.js"],
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']]
},
});
</script>
<script async src="bower_components/MathJax/unpacked/MathJax.js"></script>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
Related
I'm trying to add this library to my project: https://github.com/DragonBones/DragonBonesJS/tree/master/Phaser/Demos
I use webpack for merging all libraries, it produces such output in index.html:
<script type="text/javascript" src="./dist/vendor.bundle.js"></script>
<script type="text/javascript" src="./dist/bundle.js"></script>
I'd like to inject required files between vendor.bundle.js - which, as I suspect contains all remaining libraries merged into one file - and bundle.js - which contains my game. I could also inject them at the end of vector.bundle.js, it doesn't matter for me. Unfortunately I don't know how to do that.
Let's say that's the list of files I need to load:
<script src="./libs/dragonBones/dragonBones.js"></script>
<script src="./out/DragHelper.js"></script>
<script src="./out/BaseDemo.js"></script>
<script src="./out/HelloDragonBones.js"></script>
<script src="./out/AnimationBase.js"></script>
<script src="./out/DragonBonesEvent.js"></script>
<script src="./out/AnimationLayer.js"></script>
<script src="./out/BoneOffset.js"></script>
<script src="./out/InverseKinematics.js"></script>
<script src="./out/BoundingBox.js"></script>
<script src="./out/ReplaceSlotDisplay.js"></script>
<script src="./out/ReplaceAnimation.js"></script>
<script src="./out/CoreElement.js"></script>
<script src="./out/PerformanceTest.js"></script>
Is there a way to modify index.html template to include them between these two files mentioned earlier? Or maybe there is better way of doing that?
I am using angular2-seed as a seed for my project. The require is working perfectly fine in source files. But whenever I include a new library and reference it in index.html, there pops ups an error in console that require is not defined.
Systemjs is included
I have READ previous answers on SO which suggests to use system.js. The systemjs is already included.
Index.html
<!-- shims:js -->
<script src="/node_modules/systemjs/dist/system.src.js?1458283463580"></script>
<script src="/node_modules/systemjs/dist/system-polyfills.src.js?1458283463581"></script>
<script src="/node_modules/reflect-metadata/Reflect.js?1458283463582"></script>
<script src="/node_modules/es6-shim/es6-shim.js?1458283463582"></script>
<script src="/node_modules/angular2/bundles/angular2-polyfills.js?1458283463582"></script>
<!-- endinject -->
<script>System.config({"defaultJSExtensions":true,"paths":{"./admin/main":"/./admin/main","angular2/*":"/angular2/*","rxjs/*":"/rxjs/*","*":"/node_modules/*"},"packages":{"angular2":{"defaultExtension":false},"rxjs":{"defaultExtension":false}},"map":{"moment":"moment/moment.js"}})</script>
<!-- libs:js -->
<script src="/node_modules/rxjs/bundles/Rx.js?1458283463585"></script>
<script src="/node_modules/angular2/bundles/angular2.js?1458283463585"></script>
<script src="/node_modules/angular2/bundles/router.js?1458283463585"></script>
<script src="/node_modules/angular2/bundles/http.js?1458283463586"></script>
<script src="/node_modules/ng2-bootstrap/ng2-bootstrap.js?1458283463586"></script>
<script src="/node_modules/ng2-select/ng2-select.js?1458283463586"></script>
<script src="/node_modules/lodash/index.js?1458283463587"></script>
<script src="/node_modules/ng2-pagination/index.js?1458283463587"></script>
<!-- endinject -->
<!-- inject:js -->
<!-- endinject -->
<script>
System.import('./admin/main')
.catch(function (e) {
console.error(e,
'Report this error at https://github.com/punchagency/staffing-client/issues');
});
</script>
Error
Source where require is used
index.js of lodash
module.exports = require('./lodash');
Similarly other libraries like ng2-select and ng2-bootstrap have similar errors
You need to configure your additional dependencies in SystemJS and not include them directly into script tag.
Here is a sample:
<script>
System.configure({
map: {
'ng2-bootstrap': 'node_modules/ng2-bootstrap',
'ng2-select': 'node_modules/ng2-select',
lodash: 'node_modules/lodash/lodash.js'
},
package: {
(...)
}
});
System.import(...);
</script>
See these questions for more details:
integrate bootstrap module and ng2-select module to angular2 5min quickstart
angular2 failing lodash import
Is it really necessary to serve my html through a HTTP server for mathjax to work?
I used these:
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=config=TeX-AMS-MML_HTMLorMML"></script>
...
...
...
...<div>\( A \over B^3 \)
...
...
There are no errors on the console, but I cannot seem to render the above equation.
Do I need to serve the HTML through an HTTP Server?
You are not using proper link to the latest version of the library:
<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
When \(a \ne 0\), there are two solutions to: \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>
Use HTTPS
In this example, you can see that I am using HTTPS URL: https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML while you were using https://cdn.mathjax.org/....
The reason why you should prefer HTTPS is because MathJax is using some script to convert your Latex into SVG, it is just safer to download these scripts from a reliable source. Also, Javascript REPLs like JSFiddle, will not let you reference libraries through HTTP!
My index.html has split js files as follows:
<head>
....
<!-- build:js js/app1.min.js -->
<!-- js from lib -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<!-- js of this app -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<!-- external js -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- endbuild -->
....
</head>
.....
<body>
...
<!-- build:js js/app2.min.js -->
<!-- js from lib -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- angular-animate provides search functionality -->
<!-- js of this app -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<!-- endbuild -->
....
</body>
As you can see, I tried to use two sets of js files. The reason to split is performance. How to use usemin in this case. I tried with following:
'useminPrepare': {
'html': 'app/index.html'
},
'usemin': {
'html': ['dist/index.html']
},
However, there is no folder/file created. But in index.html, those two sections are replaced appropriately by app1.min.js and app2.min.js
Moreover, I do not understand one thing that all examples are using concat and uglify in combination of usemin. The files in index.html which are already *.min.js eg. files included in bower_components folder, what happens to them?
Unless you're heavily invested in grunt already, give gulp a look.
Below is a snippet from gulpfile.js. The gulp.src() functions take a list of files, then pipe them through transformations, ending with a list of files, which get's written to disk with gulp.dest().
This let's the first two blocks of code src, transform (minify,concat,etc), and write the js and css.
The last block of code src()'s the index.html, injects the filenames from the first two blocks, and writes the index.html to a build folder. I do consulting on gulp builds.
Here's how you'd do it in gulp:
// Vendor files are pre-minified. Get right versions.
// JS. Concat, and add revision if necessary
var srcJs = config.minify ? config.dashboard.vendorJsMin : config.dashboard.vendorJs;
var destJs = 'vendor' + (config.minify?'.min':'') + '.js';
var vendorJs = gulp.src(srcJs)
.pipe(plugins.if(config.concat, plugins.concat(destJs)))
.pipe(plugins.if(config.hash, plugins.hash()))
.pipe(gulp.dest(config.dashboard.dest + '/js'))
// Vendor files are pre-minified. Get right versions.
// CSS. Concat, and add revision if necessary
var srcCss = config.minify ? config.dashboard.vendorCssMin : config.dashboard.vendorCss;
var destCss = 'vendor' + (config.minify?'.min':'') + '.css';
var vendorCss = gulp.src(srcCss)
.pipe(plugins.if(config.concat, plugins.concat(destCss)))
.pipe(plugins.if(config.hash, plugins.hash()))
.pipe(gulp.dest(config.dashboard.dest + '/css'))
// Inject all these files into index.html
return gulp.src(config.dashboard.index)
.pipe(plugins.plumber())
.pipe(plugins.inject(vendorJs, _.merge({name: 'vendor'}, config.dashboard.injectOptions)))
.pipe(plugins.inject(vendorCss, _.merge({name: 'vendor'}, config.dashboard.injectOptions)))
.pipe(plugins.inject(appJs, _.merge({name: 'app'}, config.dashboard.injectOptions)))
.pipe(plugins.inject(appCss, _.merge({name: 'app'}, config.dashboard.injectOptions)))
.pipe(plugins.inject(templates, _.merge({name: 'templates'}, config.dashboard.injectOptions)))
.pipe(plugins.replace('REPLACE_NODE_ENV', config.NODE_ENV))
.pipe(gulp.dest(config.dashboard.dest))
This is a much more 'dev' like build system than grunt. Grunt is much more 'ops' like. Whatever works best is the one to use!
I'm pretty new to js + html. I've set up some (extjs) js based acceptance tests using jasmine and am now looking at getting continuous integration setup for them.
Because they run in browser, there's going to be a bit of mucking about to get them running under CI. What I was thinking of doing was using selenium to run the tests (we've already got a working selenium setup so that should be easy) and using jasmine-reporters to get the results output to a file that CruiseControl.net can understand.
Jasmine is pretty straight-forward in the way it works and you end up writing a html page that looks like this:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/boot.js"></script>
<script type="text/javascript">
//set this a bit higher to aid debugging
jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;
</script>
<!-- include source files here... -->
<script type="text/javascript" src="Sample/src/Player.js"></script>
<script type="text/javascript" src="Sample/src/Song.js"></script>
<script type="text/javascript" src="/native/WeatherVane.js"></script>
<script type="text/javascript" src="/native/EventCreator.js"></script>
<script type="text/javascript" src="/ext/ext-all-dev.js"></script>
<script type="text/javascript" src="/api/api.js"></script>
<script type="text/javascript">
Ext.app.REMOTING_API.maxRetries = 0;
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
</script>
<!-- include spec files here... -->
<script type="text/javascript" src="Sample/spec/SpecHelper.js"></script>
<script type="text/javascript" src="Sample/spec/PlayerSpec.js"></script>
<script type="text/javascript" src="Tests/EventCreation.js"></script>
<!-- note this needs to be last as it fires up the tests-->
<script type="text/javascript" src="TestApp.js"></script>
I've not actually got round to stripping out the sample tests yet!
Anyway the easiest way I could see of doing this would be to another page which uses a different TestApp (the last entry) which configures jasmine to use the nunitreporter from the jasmine-reporters library and just get selenium to run that page
Obviously I dont want to just copy + paste everything in there and modify just the last bit. This is going to be a list we're going to be adding to a lot and it's going to be a real pain if the CI and local testing aren't working basically the same way.
Basically what I'd like to do is effectively split it into two documents/sets of includes like this:
Document A - the shared setup
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/boot.js"></script>
<script type="text/javascript">
//set this a bit higher to aid debugging
jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;
</script>
<!-- include source files here... -->
<script type="text/javascript" src="Sample/src/Player.js"></script>
<script type="text/javascript" src="Sample/src/Song.js"></script>
<script type="text/javascript" src="/native/WeatherVane.js"></script>
<script type="text/javascript" src="/native/EventCreator.js"></script>
<script type="text/javascript" src="/ext/ext-all-dev.js"></script>
<script type="text/javascript" src="/api/api.js"></script>
<script type="text/javascript">
Ext.app.REMOTING_API.maxRetries = 0;
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
</script>
<!-- include spec files here... -->
<script type="text/javascript" src="Sample/spec/SpecHelper.js"></script>
<script type="text/javascript" src="Sample/spec/PlayerSpec.js"></script>
<script type="text/javascript" src="Tests/EventCreation.js"></script>
Document B - the current browser output method:
SomeCommandToInclude(documentA);
<!-- note this needs to be last as it fires up the tests-->
<script type="text/javascript" src="TestApp.js"></script>
Document C - the CI/xml output method:
SomeCommandToInclude(documentA);
<!-- note this needs to be last as it fires up the tests-->
<script type="text/javascript" src="XmlOutputApp.js"></script>
I've felt myself wanting to do something very similar a few times with these html script lists. How do you do this? Is it even possible? I was looking at some stuff to do with document.write a while ago but it didn't seem to do quite do the right thing.
If it's not possible to include these script lists in each other, I'm open to other approaches for getting the CI going, although I have a pretty strong preference for doing it with selenium as I dont want to learn yet another library/technology and spend ages fiddling to get it working.
Here's what I did. I didn't figure out how to include html files but I got something working.
Basic approach
I passed in a parameter in the url which says whether we are in CI mode. The client side testing library parses the url to check if it should create xml output. Because this is run in-browser by selenium it can't be saved directly to file. Instead I wrote it into a string and then query this string from Selenium and from there write it out to disc.
Jasmine-reporters
Jasmine-reporters has been forked to cope with jasmine-2.0 which I am using note that the 2.0 branch is not the main branch. I'm not familiar with git and was thrown by it hiding the other branch from you in the history. There is a compatible version of jasmine-reporters there.
I used the NUnit reporter and to faciliate use with selenium I did a massive hack and replaced the write file method with the following:
self.writeFile = function(text) {
self.output(text, totalSpecsFailed > 0);
};
I also added this to the constructor:
self.output = options.output;
My calling/config code then does this if we are in CI mode:
var jasmineEnv = jasmine.getEnv();
jasmineEnv.addReporter(new jasmineReporters.NUnitXmlReporter(
{
output: function (xmlOutput, anyFailures) {
testConfig.xmlOutput = xmlOutput;
testConfig.anyFailures = anyFailures;
}
}));
Selenium
The selenium code looks like this (note this isn't raw selenium - it's going through an API I've wrapped around the basic stuff but you should be able to get the gist)
public void PokeTheTestPage()
{
try
{
NavigateTo(WebAppUrl + "Tests/Jasmine/SpecRunner.html?outputFile=true");
var error = Driver.GetStringWith("return weatherVane.testConfig.errorText;");
if (error != "")
ExitWithError(error);
var testOutput = LongWait.Until(d => d.GetStringWith("return weatherVane.testConfig.xmlOutput;"));
var failed = Driver.GetBoolWith("return weatherVane.testConfig.anyFailures;");
using (var file = File.OpenWrite(_outputFile))
using (var writer = new StreamWriter(file))
writer.Write(testOutput);
if (failed)
ExitWithError("tests failed");
}
catch (Exception e)
{
ExitWithError(e.ToString());
}
}
private void ExitWithError(string error)
{
Console.WriteLine("got Error:");
Console.WriteLine(error);
Driver.Close();
Environment.Exit(1);
}
}