I am following the example as it is described here:
https://bilalbudhani.com/chokidar-esbuild/
When I do:
node esbuild.config.js --watch
I get the message:
[ERROR] Invalid option in build() call: "watch"
I have no idea why this is happening.
Is "watch" not longer a parameter?
I also did this example:
const path = require('path')
require("esbuild").build({
entryPoints: ["application.js", "client.js"],
bundle: true,
sourcemap: true,
outdir: path.join(process.cwd(), "app/assets/builds"),
absWorkingDir: path.join(process.cwd(), "app/javascript"),
minify: true,
watch: true,
})
.then(() => console.log("⚡Done"))
.catch(() => process.exit(1));
If i remove the line "watch:true", it compiles ok. But if I leave it, I get the same error:
Invalid option in build() call: "watch"
when I do: node esbuild.config.js
Thank you in advance
Summing up from the comments:
esbuild <v0.16 has removed the watch option. Most tutorials and HowTos are pointing to that version. Downgrade your esbuild to that if you want to use it like described there.
Better option is to use esbuild >0.16 which has a built in live reload which combines watch and serve using the newly introduced context
Related
I have an esbuild config taken straight from the docs:
import * as esbuild from 'esbuild'
let ctx = await esbuild.context({
entryPoints: ['./js/app.js'],
outdir: 'static',
bundle: true,
minify: true,
sourcemap: true,
plugins: [
postcss,
],
})
await ctx.watch()
let { host, port } = await ctx.serve({
servedir: 'static',
})
But I need to add some plugins, which are all still in commonjs (the esbuild-postcss plugin is a good example).
When I try to add require('esbuild-postcss') I get the error:
ReferenceError: require is not defined in ES module scope, you can use import instead
Which makes sense - but does this mean I can't use any esbuild plugins until they are converted to es modules?
Note: I know I can go back to a commonjs esbuild config, but as far as I can tell I won't be able to use the serve option if I do that.
I must be making a mistake somewhere, but it's not being written to stdout during optimization. I'm trying to optimize a file via requirejs, but the output isn't being minified. According to the documentation, UglifyJS should minify the code.
At any rate, the following code is trivial, but it isolates the problem.
src/index.js:
require(['config'], function () {
require(['myMod'], function (myMod) {
console.log(myMod.x());
})
})
src/myMod.js:
define(function () {
let myMod = {
x: 5
};
return myMod;
})
src/config.js:
define(function () {
require.config({
baseUrl: 'src'
});
})
And here's the gulp task that is performing the optimization:
gulp.task('optimize', function (cb) {
let config = {
appDir: 'src',
dir: 'dist/src',
generateSourceMaps: true,
preserveLicenseComments: false,
removeCombined: true,
baseUrl: './',
modules: [{
name: 'index',
include: ['myMod']
}]
}
let success = function (buildResponse) { console.log(buildResponse); cb() },
error = function (err) { console.log(err); cb(err) }
rjs.optimize(config, success, error)
})
After running the task, dist/src/index.js has all of the other modules included in it. However, it's not minified, and none of the variables have been renamed. Instead, it's as if the files were just concatenated, nothing more. Could someone tell me (1) why is it not being minified? (2) is UglifyJS throwing an error? If so, is there a way to see it when the gulp task is being run?
EDIT Here's a link to RequireJS docs where it talks about using the optimizer in node, which is done in the gulp task mentioned above. It's at the bottom under "Using the optimizer as a node module".
http://requirejs.org/docs/node.html
RequireJS' optimizer bundles UglifyJS2. UglifyJS2 does not handle ES6 or higher. If I take the options you use in your gulpfile, and plunk them into a separate file that I name options.js, and issue this command:
$ ./node_modules/.bin/r.js -o options.js
Then I get this output:
Tracing dependencies for: index
Uglify file: /tmp/t33/dist/src/index.js
Error: Cannot uglify file: /tmp/t33/dist/src/index.js. Skipping it. Error is:
SyntaxError: Unexpected token: name (myMod)
If the source uses ES2015 or later syntax, please pass "optimize: 'none'" to r.js and use an ES2015+ compatible minifier after running r.js. The included UglifyJS only understands ES5 or earlier syntax.
index.js
----------------
config.js
index.js
myMod.js
As you can see, UglifyJS does fail to minify your file, and RequireJS just skips the minification step for that file. Since this is not an outright error, the file is still output, just not minified.
If you change let to var in myMod.js, then the issue disappears.
Unfortunately, since this is not an execution failure (r.js still runs, it just does not minify the file), the error is not signaled to the errback handler you pass to rjs.optimize. I don't see a way to catch such error in a Gulpfile. The safe thing to do is to set optimize: "none" and perform the minification as an additional build step after running rjs.optimize.
I had also run into the same issue where require.js's optimizer (r.js) was combining different modules, but, it was not minify-ing the merged file. Although my run time environment is different from yours (using Java's Nashorn engine), this error was visible on my console :
If the source uses ES2015 or later syntax, please pass "optimize: 'none'" to r.js and use an ES2015+ compatible minifier after running r.js. The included UglifyJS only understands ES5 or earlier syntax.
Also, this error does not stop the optimizer from combining the files, it's just that the optimizer will not be able to mini-fy the merged file.
I am using the example provided on the chimp website for gulp-chimp
gulp.task('chimp-options', () => {
return chimp({
features: './features',
browser: 'phantomjs',
singleRun: true,
debug: false,
output: {
screenshotsPath: './screenshots',
jsonOutput: './cucumber.json',
},
htmlReport: {
enable: true,
jsonFile: './e2e_output/cucumber.json',
output: './e2e_output/report/cucumber.html',
reportSuiteAsScenarios: true,
launchReport: true,
}
});
});
the problem i have and that it's killing me is that when I run gulp chimp-options i get :
Unable to parse cucumberjs output into json: './e2e_output/cucumber.json' SyntaxError: ./e2e_output/cucumber.json: Unexpected end of JSON input
What am I doing wrong ?
I believe chimp is just a wrapper on multiple frameworks/libraries out there and I'm pretty sure they just use cucumber-html-reporter to generate its HTML reports.
If you still can't get it working automatically via chimp, just generate the options file as usual and npm install cucumber-html-reporter and then use it to generate the same report.
Create a separate file called generate_html_report.js and paste in the code under Usage. Then add this to your npm script to run after your test suite has finished. I'd avoid putting it in your afterHooks as I've had issues in the past where the JSON file hadn't been completely generated before it tries to run the script expecting the JSON file to be there.
My tslint.json looks like the following
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {},
"rulesDirectory": []
}
My gulp file has a task named tslint which looks like:
gulp.task('tslint', function() {
return gulp.src(lintFiles)
.pipe(tslint({
formatter: "verbose"
}))
.pipe(tslint.report());
});
When I run gulp tslint, it throws me the following warning
Following rules specified in configuration couldn't be applied to .js or .jsx files:
no-reference-import
Make sure to exclude them from "jsRules" section of your tslint.json.
In order to exclude I changed "jsRules": {}, to "jsRules": {"no-reference-import": false }, still no change and I got the same warning. I googled about it and could not find anything. Can you please help me?
This is an issue with the current version of tslint 5.0.0. The issue has been referenced here. You can go back to a previous version of tslint as a workaround until the issue is fixed.
Forgive me if I'm missing something obvious, I'm relatively new to javascript, ES2015, etc.
I have a gulp task to run gulp-babel over my Aurelia application. Everything runs and works, except the files containing decorators (Aurelia's #inject)
those files spit out the same error in gulp-notify:
Error: (path-to-file)/nav-bar.js: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got "Decorator"
I'm not really sure how to begin resolving this. My task looks like:
gulp.task('build-system', function () {
return gulp.src(paths.source)
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(changed(paths.output, {extension: '.js'}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(babel(compilerOptions))
.pipe(sourcemaps.write({includeContent: true}))
.pipe(gulp.dest(paths.output));
});
and my compilerOptions:
module.exports = {
moduleIds: false,
comments: false,
compact: false,
presets: ['es2015'],
plugins: ['syntax-decorators', 'transform-decorators']
};
any insight would be greatly appreciated!
I believe this is a babel v6 issue. (which is implied by your presets: ['es2015'])
If you drop back to babel v5.x (as included with the skeleton) it should work.
Here's the decorator issue in the Babel Phabricator instance. It may be some time before it's fixed based on this reply.