I'm trying to get Durandal.js optimizer working on my test project, but it seems to generate nothing to main-built.js. I use the following command from node.js command prompt, in durandal/amd folder:
optimizer.exe --verbose true
Result is
Using default base configuration.
Configuring for deploy with almond (custom).
{
"name": "durandal/amd/almond-custom",
"inlineText": true,
"stubModules": [
"durandal/amd/text"
],
"paths": {
"text": "durandal/amd/text"
},
"baseUrl": "C:\\Users\\Tommi Gustafsson\\Documents\\Visual Studio 2012\\Projects\\DurandalTests\\DurandalTest1\\TestApp",
"mainConfigFile": "C:\\Users\\Tommi Gustafsson\\Documents\\Visual Studio 2012\\Projects\\DurandalTests\\DurandalTest1\\TestApp\\main.js",
"include": [
"main-built",
"main",
"bindings/tinymce-binding",
"durandal/app",
"durandal/composition",
"durandal/events",
"durandal/http",
"text!durandal/messageBox.html",
"durandal/messageBox",
"durandal/modalDialog",
"durandal/system",
"durandal/viewEngine",
"durandal/viewLocator",
"durandal/viewModel",
"durandal/viewModelBinder",
"durandal/widget",
"durandal/plugins/router",
"durandal/transitions/entrance",
"raphael-amd/eve.0.3.4",
"raphael-amd/raphael.2.1.0.amd",
"raphael-amd/raphael.2.1.0.core",
"raphael-amd/raphael.2.1.0.svg",
"raphael-amd/raphael.2.1.0.vml",
"viewmodels/flickr",
"viewmodels/modal1",
"viewmodels/myPage",
"viewmodels/shell",
"viewmodels/welcome",
"text!views/detail.html",
"text!views/flickr.html",
"text!views/modal1.html",
"text!views/myPage.html",
"text!views/shell.html",
"text!views/welcome.html"
],
"exclude": [],
"keepBuildDir": true,
"optimize": "uglify2",
"out": "C:\\Users\\Tommi Gustafsson\\Documents\\Visual Studio 2012\\Projects\\DurandalTests\\DurandalTest1\\TestApp\\main-built.js",
"pragmas": {
"build": true
},
"wrap": true,
"insertRequire": [
"main"
]
}
Deleting old output file.
Tracing dependencies for: durandal/amd/almond-custom
Then, when I check main-built.js, it is empty. Can anyone help me what is the problem? I have several AMD modules in the test project, including Raphael.js AMD modules.
My requirejs configuration looks like this:
requirejs.config({
paths: {
'text': 'durandal/amd/text',
'eve': './raphael-amd/eve.0.3.4',
'raphael.core': './raphael-amd/raphael.2.1.0.core',
'raphael.svg': './raphael-amd/raphael.2.1.0.svg',
'raphael.vml': './raphael-amd/raphael.2.1.0.vml',
'raphael': './raphael-amd/raphael.2.1.0.amd',
'tinymce': "../Scripts/tinymce/jquery.tinymce.min"
}
});
In the same amd folder, where optimizer is stored, try running node r.js -o app.build.js. I've seen r.js sometimes choke about some dependencies, which resolves without problem when loading via require.js. For whatever reason the error messages won't show up when using optimizer --verbose. Typically the error message provides enough information to see where this occurs and if you've to update require.contig.paths or a specific define dependency.
Related
I installed the Mochawesome results reporting add-on to Cypress. The problem is that every time I finish all the tests, I only have the html file with the last one in the reports folder. Do you know how to make a report from the whole set of tests?
However, only one file is created each time, and it is the last one
and in my cypress.json I have this:
Code and tests in cypress.json:
{
"projectId": "fi4fhz",
"viewportHeight": 1080,
"viewportWidth": 1920,
"testFiles": [
"settings.js",
"test1.js",
"test2.js",
"test3.js",
"test4.js",
"test5.js",
"test6.js",
"test7.js",
"test8.js",
"test9.js",
"test10.js",
],
"env": {
"numTestsKeptInMemory": 0,
"projectUrl": "https://testlocal:6001/",
"settings": {
"SP": {
"tenant": "k.online",
"clientId": "3a15528c",
"clientSecret": ".u4L",
"administrationUrl": ""
}
},
"reporter": "mochawesome",
"reporterOptions": {
"charts": true,
"overwrite": false,
"html": false,
"json": true,
"reportDir": "cypress/report/mochawesome-report"
},
your configuration seems correct, but try to change reportDir to cypress/report and follow this steps:
After running all tests, you should find multiple "mochawesome.json" files, 1 for each spec. To create a single html report, you need one more package.
Install mochawesome-merge package (npm i mochawesome-merge)
Run mochawesome-merge "cypress/report/*.json" > mochawesome.json, this will create a single JSON file that contains all the tests.
Now run the command marge mochawesome.json (marge means MochAwesome Report GEnerator) and the mochawesome-report directory will be created where there will be an html with all your tests. Here you can see an example of my report
I want to use rollup to make two builds of my library, an UMD version as well as a never ESM version
Earlier my configuration when using the non official plugin rollup-plugin-typescript2 looked like this:
import typescript from 'rollup-plugin-typescript2'
import pkg from '../package.json'
export default {
input: 'src/index.ts',
output: [
{
file: pkg.main,
format: 'umd',
name: pkg.name,
sourcemap: true
},
{
file: pkg.module,
format: 'esm',
sourcemap: true
},
],
plugins: [
typescript({
tsconfig: "src/tsconfig.json",
useTsconfigDeclarationDir: true
}),
],
}
And in my package json I have:
(...)
"scripts": {
"build": "rollup -c ./scripts/dist.js",
},
"main": "dist/index.js",
"module": "dist/index.esm.js",
"files": [
"dist"
],
(...)
And in my tsconfig.json I have:
(...)
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"declaration": true,
"declarationDir": "./dist/#types/chrisweb-utilities",
(...)
The resulat was "created dist/index.js, dist/index.esm.js in 2.6s" ... all good
The files that got created where the following:
/dist
|-#types
|-index.d.ts
|-index.js
|-index.esm.js
|-index.esm.js.map
|-index.js.map
Today I tried to use the official plugin #rollup/plugin-typescript instead (because I use that one in other projects where I only do a single ESM build and it works without a problem and I wanted to use the same plugins through out all of my projects)
I had a first error because of the configuration propery only rollup-plugin-typescript2 understands:
"(!) Plugin typescript: #rollup/plugin-typescript TS5023: Unknown compiler option 'useTsconfigDeclarationDir'."
So I removed it, which fixed that problem ...
But I got another error: "[!] (plugin typescript) Error: #rollup/plugin-typescript: 'dir' must be used when 'outDir' is specified."
So I added dir to my configuration, which then looked like this:
import typescript from '#rollup/plugin-typescript';
import pkg from '../package.json'
export default {
input: 'src/index.ts',
output: [
{
file: pkg.main,
format: 'umd',
name: pkg.name,
sourcemap: true,
dir: "dist",
},
{
file: pkg.module,
format: 'esm',
sourcemap: true,
dir: "dist",
},
],
plugins: [
typescript({
tsconfig: "tsconfig.json",
}),
],
}
Nope, next error shows up: "[!] Error: You must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks."
Actually I don't even want to generate chunks, I'm fine with a single file, but I remove dir I'm back to the previous error. So next thing I tried was to keep "dir" and instead remove "file"
This worked, or at least I got a success message: "created dist, dist in 2.6s" but the problem now is that instead of having two builds I just have a single one "dist/index.js", the first build for UMD gets owerwritten by the second one for ESM.
I thought ok one last try, lets output the UMD version in a subfolder of /dist and the ESM version in another one, so I changed my config to this:
(...)
output: [
{
format: 'umd',
name: pkg.name,
sourcemap: true,
dir: "dist/umd",
},
{
format: 'esm',
sourcemap: true,
dir: "dist/esm",
},
],
(...)
This failed too :( this time with this error: "[!] (plugin typescript) Error: #rollup/plugin-typescript: 'outDir' must be located inside 'dir'." So my outDir is "./dist" which yes is not in dir: "dist/umd" anymore, I only have one outDir in tsconfig, so it can't be in each rollup output.dir, or do I miss something here?
Oh and I actually also tried something else, remember that earlier error where rollup told me that "'dir' must be used when 'outDir' is specified", so I removed outDir from tsconfig.json and hey another rollup error (at this point I think I got all possible rollup errors ;) ) which was the following: "[!] (plugin typescript) Error: #rollup/plugin-typescript: 'dir' must be used when 'declarationDir' is specified."
So I also commented out "declarationDir" in the tsconfig ... no more error, but this is not really the solution as now I don't have typescript type definition files getting generated.
I went back and forth and tried all combinations for hours, but no luck so far...
So I'm stuck and was wondering if someone can help me out? Maybe you had this or a similar problem? Either I'm missing something or this a bug in which case I will open a ticket in a few days.
I use Polymer 2.0 and my build setting is:
"builds": [
{
"name": "bundled",
"bundle": true,
"js": { "compile": true},
"css": { "minify": true },
"html": { "minify": true }
}]
I get "Can’t find variable: babelHelpers" error after build.
The Polymer CLI version that I use is 1.1.0.
EDIT: I was using polymer-cli locally. After installing latest polymer-cli globally, now I get “Constructor requires ‘new’ operator” on safari and “Failed to construct ‘HTMLElement’: Please use the ‘new’ operator, this DOM object constructor cannot be called as a function.” on chrome.
EDIT2: used webcomponents-loader.js instead of webcomponents-lite.js and my problem solved.
I was getting same error. Problem was that index.html is technically my entrypoint in my polymer.json config, but my actual served up entrypoint is another file that comes from my server (_Layout.cshtml since I'm using .NET on my backend). What I needed to do was take the code in my compiled index.html file and move it over to my CSHTML file once I set "compile": true. Problem solved.
I develop an iPad/iPhone App web app. Both share some of the resources. Now I wanna build a bootstrap js that looks like this:
requirejs(['app'], function(app) {
app.start();
});
The app resource should be ipadApp.js or iphoneApp.js. So I create the following build file for the optimizer:
{
"appDir": "../develop",
"baseUrl": "./javascripts",
"dir": "../public",
"modules": [
{
"name": "bootstrap",
"out": "bootstrap-ipad.js",
"override": {
"paths": {
"app": "ipadApp"
}
}
},
{
"name": "bootstrap",
"out": "bootstrap-iphone.js",
"override": {
"paths": {
"app": "iphoneApp"
}
}
}
]
}
But this doesn't seems to work. It works with just one module but not with the same module with different outputs.
The only other solution that came in my mind was 4 build files which seems a bit odd. So is there a solution where i only need one build file?
AFAIK the r.js optimizer can only output a module with a given name once - in your case you are attempting to generate the module named bootstrap twice. The author of require.js, #jrburke made the following comment on a related issue here:
...right now you would need to generate a separate build command for each script being targeted, since the name property would always be "almond.js" for each one.
He also suggests:
...if you wanted just one build file to run, you could create a node program and drive the optimizer multiple times in one script file. This example shows using requirejs as a module and calling requirejs.optimize().
I took a similar approach in one of my projects - I made my build.js file an ERB template and created a Thor task that ran through my modules and ran r.js once for each one. But #jrburke's solution using node.js is cleaner.
I am working on my first project which uses a dojo 1.7.2 component, and only need a vertical slider widget. I was able to create a custom build which is supposed to include only the modules needed for my stated dependencies. Using the following build profile, and the command C:\dojo-release-1.7.2-src\util\buildscripts>build -p profiles/km.admin.dashboard.profile.js -r the resulting release/dojo/dojo.js.uncompressed.js is 796kb, and the release/dojo/dojo.js is 236kb. Is there any way to exclude more unneeded modules to reduce the file size? For instance, I just opened the release/dojo/dojo.js.uncompressed.js and took a quick look, there is a dojo/json package, I am not using any json. How do I exclude it? Thank you.
dependencies = {
layers: [
{
name: 'dojo.js',
customBase: true,
dependencies: [
'dojo/dojo',
'dojo.aspect',
'dojo/selector/acme',
'dojo/cldr/nls/number',
'dijit.form.VerticalSlider',
'dijit.form.VerticalRule',
'dijit.form.VerticalRuleLabels'
]
}
],
staticHasFeatures: {
'dojo-trace-api':0,
'dojo-log-api':0,
'dojo-publish-privates':0,
'dojo-sync-loader':0,
'dojo-xhr-factory':0,
'dojo-test-sniff':0
},
prefixes: [
[ 'dijit', '../dijit' ],
[ 'dojox', '../dojox' ]
]
}
There are some approaches by which you can trim down dojo.js to a bare minimum and keep adding the modules within dojo.js that you really need.
See:
http://dojotoolkit.org/reference-guide/1.7/build/customBase.html
and also:
http://www.sitepen.com/blog/2008/07/01/dojo-in-6k/ (this is somewhat old and cutombase approach in the first link might work better)