How to transpile on fly before running script? - javascript

Does anyone knows how to tackle following problem?
What is the best approach to resolve it?
I wanted to present the simplest example, but generally I would like to run node script that have some dependencies files that are not written in es5. This script takes argument from cli and perform some action (eg. change content of index.html file), here for simplicity we only console log some greeting.
Currently we would get an error:
SyntaxError: Unexpected token export
Is there a way to somehow transpile on fly all file dependencies to es5 and run the script?
sample folder structure:
src/welcome.js
src/greeting.js
src/... // bunch of other files
package.json
greeting.js
const name = process.argv[2];
export const sayHello = `Hello ${name}!`;
export const sayHi = `Hi ${name}!`;
welcome.js
const { sayHello } = require('./greeting');
console.log(greeting, "Nice to meet you!");
in package.json
"scripts": {
"greet": "node src/welcome.js"
}
cli
npm run greet John

Related

hardhat run with parameters

I need to run a particular ts script using hardhat from the command line but I need to specify parameters... Similar to this:
npx hardhat run --network rinkeby scripts/task-executor.ts param1 param2
Where the --network rinkeby is the parameter for the hardhat run
And param1 and param2 are parameters for the task-executor.ts script.
I couldn't find any post regarding this issue and I cannot make it work.
I also tried defining a hardhat task and added those parameters but if I try to execute it I get:
Error HH9: Error while loading Hardhat's configuration.
You probably tried to import the "hardhat" module from your config or a file imported from it.
This is not possible, as Hardhat can't be initialized while its config is being defined.
Because I need to import hre or ethers from hardhat in that particular task.
Does anybody know how to accomplish what i need ??
Thanks a lot!!
According to Hardhat:
Hardhat scripts are useful for simple things that don't take user arguments, and for integrating with external tools that aren't well suited for the Hardhat CLI, like a Node.js debugger.
For scripts that require parameters, you should use Hardhat Tasks.
You can code the task in a different file than hardhat.config.ts. Here is an example task using positional parameters in the file sampleTask.ts:
import { task } from "hardhat/config";
task("sampleTask", "A sample task with params")
.addPositionalParam("param1")
.addPositionalParam("param2")
.setAction(async (taskArgs) => {
console.log(taskArgs);
});
Remember to import it inside hardhat.config.ts:
import "./tasks/sampleTask";
Then run it with:
npx hardhat sampleTask hello world
And it should print:
{ param1: 'hello', param2: 'world' }
You can read more about named, positional and optional parameters on tasks here.
If you need to use hre or ethers, you can get hre from the second parameter of the setAction function:
task("sampleTask", "A sample task with params")
.addPositionalParam("param1")
.addPositionalParam("param2")
.setAction(async (taskArgs, hre) => {
const ethers = hre.ethers;
});
It could be useful to check the diferences between a script and a task and how to choose: Hardhat has This on documentation.
Usually it works like this:
const hre = require('hardhat');
const { ethers } = hre;

How to load a variable form my app into package.json?

I know this sounds as easy as using globals, but I'm not so sure.
Here's my case:
I have multiple files within /src directory of my React app, let's call them src/a.js, src/b.js,
every single of these files exports one object which I then use within my app:
./src/a.js:
export default {
filename: 'a',
foo: 'bar',
};
./src/b.js:
export default {
filename: 'b',
foo: 'bar',
blah: 'hah',
};
Now I have a command to check whether or not structure of objects within these files match (they are being changed by many developers multiple times a day), so when I do npm check in terminal it will return false for above input, because blah does not exist within two files.
My package.json looks like this:
"scripts": {
"check": "node check.js runCheck",
/.../
}
My question is: how the heck do I load these variables to compare them in package.json?
I have a file called:
./check.js:
function check(files) {
// checking files there
};
module.exports.check = check;
Approach #1 - imports
This is a build file, not part of the application itself, so when I try to do:
./check.js:
import a from './src/a';
import b from './src/b';
I'm getting:
SyntaxError: Cannot use import statement outside a module.
Approach #2 - require
This is going to cause trouble, because I'm using imports, not modules within my app, therefore doing:
./check.js:
const a = require('./src/a');
const b = require('./src/b');
Returns:
Error: Cannot find module './src/a'.
Of course I can't do module.exports within the a.js/b.js files, because they're part of my app and they should use exports, I've tried using both export and module.exports, but it does not work as well and looks shitty.
How do I tackle this? Should I load the files using some file loader, parse it as JSON an then compare? Or maybe there's an easier way?
You'll need to use something like esm (https://github.com/standard-things/esm) to run node with module support.
It should be as simple as:
npm install esm
Then update your package script to be:
"check": "node -r esm check.js runCheck",
Edit Btw, a very clear and well structured question.

How to use class when testing with Vue, Cypress and Cucumber?

I am trying to implement something simple: I want my e2e tests run with Cypress and cucumber.
I have an application created with Vue CLI 4.1.1. I added with NPM the package: cypress-cucumber-preprocessor (V1.19.0)
Edit:
After a lot of research and tests, I think I found where the problem comes from, but I don't know how to fix it yet:
The '#vue/cli-plugin-babel/preset' does not seem to be working with
.feature file...
My babel.config.js file is:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
Any idea how I can make cli-plugin-babel working with cucumber cypress?
Original message :
I have a Test.feature file, executing steps defined in test.step.js files.
Here is the content of my test.spec.js
import { When, Then } from 'cypress-cucumber-preprocessor/steps';
import { HomePage } from './pages/home.page';
When(/^I open the Home page$/, () => {
let homePage = new HomePage();
homePage.goTo();
});
Then(/^I see "([^"]*)" in the main heading$/, msg => {
cy.contains('h1', msg)
});
And the content of my PageObject home.page.js:
export class HomePage {
goTo() {
cy.visit("/");
}
}
When I run:
npm run test:e2e
I get the following error:
Oops...we found an error preparing this test file:
tests/e2e/features/Test.feature
The error was:
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
This occurred while Cypress was compiling and bundling your test code. This is usually caused by:
- A missing file or dependency
- A syntax error in the file or one of its dependencies
Fix the error in your code and re-run your tests.
These errors does not occur when I use:
export function goToHomePage() {
cy.visit("/");
}
You can checkout my project on Github: https://github.com/truar/cloudcmr-v2 (branch master for the passing case, branch pageObject_pattern for the failing case).
I am assuming this is something related to ES6 and cypress... but I clearly don't know what is going on here. Besides, everything I find on the Internet talks about cypress cucumber and Typescript, which I don't use...
What am I missing?
I found the answer. See this PR for more details : https://github.com/cypress-io/cypress/issues/2945
Basically, there is an incompatibility between Babel 7 and Cypress 3. I had to change the babel.config.js file :
module.exports = process.env.CYPRESS_ENV
? {}
: {
presets: ["#vue/cli-plugin-babel/preset"]
};
It is just a workaround, not a real fix. We have to disable babel when running cypress.
Hope will help you !

Running an executable before index.js

I have written a file that needs to execute before the index.js, since it uses commander to require the user to pass information to the index file. I have it placed in a bin directory, but I'm not sure how to make it run. I can cd into the directory and run node <file_name> and pass it the values needed, and it runs fine (As I export the index and import it into the file and call it at the end) but is there not a way to add it into the package.json to run it with an easier command?
Executable:
#!/usr/bin/env node
const program = require('commander');
const index = require('../src/index.js')
program
.version('0.0.1')
.option('-k, --key <key>')
.option('-s, --secret <secret>')
.option('-i, --id <id>')
.parse(process.argv);
let key = program.key;
let secret = program.secret;
let publicId = program.id;
index(key, secret, publicId);
When Node.js script is supposed to run as executable, it's specified as package.json bin option:
To use this, supply a bin field in your package.json which is a map of command name to local file name. On install, npm will symlink that file into prefix/bin for global installs, or ./node_modules/.bin/ for local installs.
It can be located in src or elsewhere:
{
...
"bin" : { "foo" : "src/bin.js" },
...
}

Exporting a class with ES6 (Babel)

I'm writing some frontend code with ECMAScript 6 (transpiled with BabelJS, and then browserified with Browserify) so that I can have a class in one file, export it and import it in another file.
The way I'm doing this is:
export class Game {
constructor(settings) {
...
}
}
And then on the file that imports the class I do:
import {Game} from "../../lib/pentagine_browserified.js";
var myGame = new Game(settings);
I then compile it with grunt, this is my Gruntfile:
module.exports = function(grunt) {
"use strict";
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-browserify');
grunt.initConfig({
"babel": {
options: {
sourceMap: false
},
dist: {
files: {
"lib/pentagine_babel.js": "lib/pentagine.js",
"demos/helicopter_game/PlayState_babel.js": "demos/helicopter_game/PlayState.js"
}
}
},
"browserify": {
dist: {
files: {
"lib/pentagine_browserified.js": "lib/pentagine_babel.js",
"demos/helicopter_game/PlayState_browserified.js": "demos/helicopter_game/PlayState_babel.js"
}
}
}
});
grunt.registerTask("default", ["babel", "browserify"]);
};
However, on the new Game( call, I get the following error:
Uncaught TypeError: undefined is not a function
As so, what I did was analyse the generated code by Babel and Browserify and I found this line on PlayState_browserified.js:
var Game = require("../../lib/pentagine_browserified.js").Game;
I decided to print the require output:
console.log(require("../../lib/pentagine_browserified.js"));
And it is nothing but an empty object. I decided to check out the pentagine_browserified.js file:
var Game = exports.Game = (function () {
It seems like it is correctly exporting the class, but for some other reason it is not being required on the other file.
Also, I'm sure the file is being required properly because changing the string "../../lib/pentagine_browserified.js" spits out a Not Found error, so it is going for the right file, that I'm sure about.
Browserify is meant to be fed a single "entry point" file, through which it recursively traverses all of your require statements, importing the code from other modules. So you should be require'ing the _babel.js versions of modules, not _browserified.js ones.
From the looks of it, you intend for your app's "entry point" to be demos/helicopter_game/PlayState_browserified.js, yeah? If that's the case:
In PlayState.js, change it to import {Game} from "../../lib/pentagine_babel.js";.
In Gruntfile.js, remove "lib/pentagine_browserified.js": "lib/pentagine_babel.js".
Works for me. Let me know if that suffices or I am misunderstanding your requirements here.
P.S. You can use babelify to avoid having separate Grunt tasks for Babel and Browserify. See my answer here for an example.
I had a slightly different file configuration, that gave me some difficulty to get the "require" syntax to work in Node, but this post gave me the hint on how to used the babel-ified version of the file name.
I am using WebStorm with the FileWatcher option set to Babel, and I have the FileWatcher configured to watch all files with suffix .jsx, and rename the compiled output file from {my_file}.jsx to {my_file}-compiled.js.
So in my test case, I have 2 files:
Person.jsx:
class Person { ... }
export { Person as default}
and another file that wants to import it:
Test.jsx:
var Person = require('./Person-compiled.js');
I couldn't get the "require" statement to find the module until I started the file path with './' and also add '-compiled.js' to properly specify the file name so that Node es5 could find the module.
I was also able to use the "import" syntax:
import Person from './Person-compiled.js';
Since I have set up my WebStorm project as a Node ES5 project, I have to run 'Test-compiled.js' (not 'Test.jsx').

Categories