What's the easiest way to run a javascript module that exists in my react native source tree using babel?
Let's say I have the following file
// hi.js
import _ from 'lodash'
console.log(_.upperCase('hi'));
And I want to just run this quickly from the command line to test it out or use it in a utility script or something like that. I can't use node directly because of the import statement. I know I can install and configure babel... but since babel is already bundled and configured with RN can I just use that somehow?
e.g > workspace/node_modules/babe-core/bin/babel-node hi.js
Can I just install babel-cli into the project?
Thanks!
You can compile a file using the babel command line:
babel hi.js --out-file hi-compiled.js --plugins=es2015,react
This will allow you to then run the file with node:
node hi-compiled.js
Alternatively you could use babel-node which would do it in one command:
babel-node hi.js --plugins es2015
All this can be achieved with npm install -g babel-cli
Related
My code runs in Node.js environment. I have installed #types/node. When I write import http = require('http') or import * as http from 'http', the type of the object I'm importing is inferred:
However, when I write const fs = require('fs');, the type is any. Why is that? Can I do anything about it?
TL;DR
A possible fix for this is to import the types for Node.js.
Full Solution
The solution for this issue is to import the types for Node.js.
This is available as an npm package. It contains all of the types for Node.js.
To install it, you need to run the following command.
$ npm install --save-dev #types/node
The reason the --save-dev flag is on the install command is because it isn't supposed to be a dependency, but instead a dev (development) dependency. This will not install this package if, for example, your project is installed as an npm module.
After this, IntelliSense will automatically pick up the type definitions, and will add auto-correct your Node.js code, including doing some other handy things.
If the type definitions don't get picked up, then the best solution is to restart Visual Studio Code. If that doesn't work, make sure that this is in your package.json file.
{
"devDependencies": {
"#types/node": "^17.0.31"
}
}
Note: The version was correct at the time of post.
If it isn't, then add that code in your package.json file, save it, and run the following command.
$ npm install
This should install it successfully.
I'm new to using Babel but have installed it according to the Installation guide here https://babeljs.io/setup#installation
It says at the end that you need to install plugins in order for it to work:
Now, out of the box Babel doesn't do anything ... You will need to add plugins for Babel to do anything.
I want to use this plugin: https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator to fix some Internet Explorer 11 issues as described here: async function declaration expects ';' in Internet Explorer
I've created a file in the root of my project called babel.config.json and added the following to it.
{
"plugins": ["#babel/plugin-transform-async-to-generator"]
}
My package.json contains this:
"scripts": {
"build": "babel webroot/js -d webroot/js/babel"
},
"devDependencies": {
"babel-cli": "^6.0.0"
},
When I execute npm run build from my project root it gives the following error messages.
Error: Cannot find module '#babel/plugin-transform-async-to-generator' from '/Users/andy/my-project'
Prior to creating babel.config.json I was able to run npm run build without getting any errors. As per the quote this doesn't really do anything other than output the same JavaScript as I had before transpiling it. But I knew that the process worked - in my case the input files are in webroot/js and it outputs the equivalent transpiled files to webroot/js/babel.
I don't understand how to fix this error. Is this some issue with my config file or is additional setup needed?
I've read the documentation on Babel Config Files at https://babeljs.io/docs/en/config-files and found this incredibly convoluted. My goal is to have a configuration file per project, which is why I opted for babel.config.json
npm version is 6.13.4, node version is 12.16.1.
babel-cli is outdated, you should install #babel/cli instead. It also has a peer dependency on #babel/core which you need to install as well. #babel/plugin-transform-async-to-generator plugin needs to be installed separately.
Summarizing:
Uninstall outdated babel-cli:
npm uninstall --save-dev babel-cli
Install the required packages:
npm install --save-dev #babel/cli #babel/core #babel/plugin-transform-async-to-generator
Regarding your problem with IE 11. #babel/plugin-transform-async-to-generator won't fix your issue. IE 11 doesn't support yield.
If you want to use the latest ECMAScript features and still support a wide range of browsers you should instead use #babel/preset-env. You can check out the docs on the official website: #babel/preset-env.
For async to work in IE 11 you will also need to setup polyfills. #babel/preset-env won't use them with default settings. Look under useBuiltIns option for instructions.
Additionally, there's a problem with your build script, specifically with this line: babel webroot/js -d webroot/js/babel.
With such a command babel will process whole webroot/js directory (including subdirectories) and place transpiled files to webroot/js/babel. This means that after you run this command again it will process not only your original source files but also transpiled source files because webroot/js/babel is a subdirectory of webroot/js.
I think you need to install #babel/plugin-transform-async-to-generator. More here: https://www.npmjs.com/package/#babel/plugin-transform-async-to-generator#install
npm install --save-dev #babel/plugin-transform-async-to-generator
I understand that Meteor comes with NodeJS bundled as a dependency, but I have a module written in ES6 with a default argument value declared in one of the Class methods. It's currently erring using Meteor v1.4.3.2 like so:
(STDERR) packages/modules.js:374
(STDERR) constructor(options={format:'.json'}) {
(STDERR) ^
(STDERR)
(STDERR) SyntaxError: Unexpected token =
Do I need to rewrite the module to NOT use the default argument?
OR... is there a way to force Meteor to run Node v6.x?
OR... is there a fork of a development version of Meteor that I may use for my project?
OR... should I introduce a module dependency to properly build the module sources for any version of Node?
EDIT: Someone asked for output of node -v. I'm definitely running node v6.10.0
$ > node -v
v6.10.0
I'm also covering the module with chai tests that run and pass the build locally using NodeJS v6.10.0 when I run npm test inside the module directory. The module is a local package I'm developing concurrently. It was installed in meteor using npm install /path/to/module.
EDIT 2: Unfortunately running meteor add ecmascript didn't do the trick. This is a custom NPM module written specifically for Node v6+. Meteor is not using Node v6, but 4.8 rather.
$ > meteor node --version
v4.8.0
It's clear that while node v4.8 supports a lot of the ES6 functionality, it does not support default function params. See: http://node.green/#ES2015-syntax-default-function-parameters
1. Use imports modules with ecmascript in Meteor
Just make sure you install the ecmascript package and use the imports folder structure and you should be good to go. The ecmascript package definitely supports es6 parameters. The below is from the meteor docs.
Default expressions for function parameters, evaluated whenever the parameter is undefined, ...rest parameters for capturing remaining arguments without using the arguments object:
You can add it like this.
$ meteor add ecmascript
2. Use babel to transpile the external ES6 module - BEST Solution
For using your npm module, you have to add something like es6-default-params or babel to your package (the npm module...not the meteor project) so that your es6 is transpiled down to something that can be used. This is the practice for publishing a build that can be used by any node version (eg. You don't want to require someone to target a specific node version to use your package).
Assuming you have a package.json inside the module. i.e. you've run npm init in your /path/to/module.
$ cd path/to/package
$ npm install --save-dev babel-cli
Create appropriate src and lib folders for two sets of sources.
$ mkdir src // for ES6/ES2015 sources
$ mkdir lib // for ES5 transpiled sources
Then edit package.json with a build command. This tells babel where to find the source (src), a preset to transpile with (es2015), and where to output the ES5 sources (lib).
// package.json
...
"scripts": {
"build": "babel src -d lib --presets=es2015"
},
"main": "./lib/mymodule.js",
...
NOTE a couple additional important points:
If you're using git to manage sources, add a .gitignore file to ignore the ./lib/ directory.
If you're considering publishing your module to npm, add an .npmignore file that ignores the ./src/ directory. If you publish with .gitignore alone, npm will use the .gitignore and omit your /lib!
This information is a hybrid of the babel cli examples and Alex Booker's babel guide.
3. Use meteor build to control the Meteor build - LAST DITCH EFFORT
Also, I'm not sure you can upgrade the node version bundled with meteor, but you can always build your app and run in a different node version. Use the meteor build command. Then follow the directions in the built project folder.
I am using the latest nodejs version, but am still getting an error while using es6 module import.
I could also find on a blog that node doesn't yet support es6 import module.
https://nodesource.com/blog/es-modules-and-node-js-hard-choices/ - no JavaScript runtime currently supports ES Modules.
I am new to javascript and node, is anyone using es6 module import with nodejs, without transpiling the code to lower js versions.
You can if you are willing to use a tool like Babel.
npm i -D babel babel-cli babel-core babel-preset-es2015
Create a file .babelrc and put the following in it:
{
"presets": ["es2015"]
}
And then in package.json in the scripts section do some thing like this:
"dev": "babel src -d dist && node dist/your_file.js"
This will transpile all of the code in a directory named src/ but it in a directory called dist/, and then run the file you specify.
It can then be used via the command as follows:
npm dev
UPDATE 2019:
import / export statements are supported in node v12.
Right now behind the --experimental-modules flag.
Which is supposed to be removed this October.
I have a node.js VS 2015 project.
Now I downloaded the 'p2' physics engine via the integrated npm:
Now I want to use the module in my project. But I don't know how to import it, so it is recognized by the ts compiler.
I've downloaded an additional p2.d.ts file for typesafety it and put it into the project directory.
Even if I reference the file it tells me 'p2' is not found:
if I use 'import p2 = require('./p2.d.ts');' instead. The compiler tells me './p2.d.ts' is not a module.
How do I call node.js modules from TypeScript and how do I add additional *.d.ts files which are not shipped with the node module?
I may help with the second part of your question ..
in your $root/users/[you] directory run this node command
npm install tsd -g
Then use tsd (type script definition) to query tsd query [something] or to install tsd install lodash from the cmd line to find the *.d.ts files. Note in visual studio you might have to reorganize the installed files as VS expects a different directory. https://www.npmjs.com/package/tsd