How to duplicate the behavior of babel's removed { "optional" : "runtime" } argument? - babeljs

I was building an ES6 project with browserify and babelify 6.4.0, but using the latest versions of both there is no more {"optional": "runtime"} option. Is there a way to get babel 6.10.2 and babelify 7.3.0 to do exactly the same thing as the older versions?

You'll want to:
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
then in your Babel config, you'd enable the plugin:
plugins: ['transform-runtime']

Related

Trying to run babel : "cannot find module #babel/core"

I'm trying to set up a build environment to explore react.
My build process uses gulp.
I installed packages like this:
npm install --save-dev gulp-babel#7 babel-core babel-preset-env
After discovering that I needed to install something related to babel and react I also ran:
npm install --save-dev #babel/preset-react
My .babelrc has this:
{ "presets": ["#babel/preset-react"] }
My gulpfile has this:
gulp.task('scripts', function() {
return gulp.src(['./src/js/main.js' ])
.pipe(babel({
presets : ['#babel/preset/react']
}))
.pipe(concat('test.js'))
.pipe(gulp.dest('./js'))
.pipe(uglify())
.pipe(rename('test.min.js'))
.pipe(gulp.dest('./js')) ;
});
When I run 'gulp scripts' I get this:
[22:51:14] Using gulpfile ~/play/learning-react-2/gulpfile.js
[22:51:14] Starting 'scripts'...
[22:51:14] 'scripts' errored after 59 ms
[22:51:14] Error in plugin "gulp-babel"
Message:
Cannot find module '#babel/core' (While processing preset: "/home/bob/play/learning-react-2/node_modules/#babel/preset-react/lib/index.js")
I deleted babel-core from node_modules, and reinstalled it using the command:
npm install --save-dev #babel/core
If I look at the contents of node_modules, I see these packages related to babel:
babel-code-frame/
babel-helper-builder-binary-assignment-operator-visitor/
babel-helper-call-delegate/
babel-helper-define-map/
babel-helper-explode-assignable-expression/
babel-helper-function-name/
babel-helper-get-function-arity/
babel-helper-hoist-variables/
babel-helper-optimise-call-expression/
babel-helper-regex/
babel-helper-remap-async-to-generator/
babel-helper-replace-supers/
babel-messages/
babel-plugin-check-es2015-constants/
babel-plugin-syntax-async-functions/
babel-plugin-syntax-exponentiation-operator/
babel-plugin-syntax-trailing-function-commas/
babel-plugin-transform-async-to-generator/
babel-plugin-transform-es2015-arrow-functions/
babel-plugin-transform-es2015-block-scoped-functions/
babel-plugin-transform-es2015-block-scoping/
babel-plugin-transform-es2015-classes/
babel-plugin-transform-es2015-computed-properties/
babel-plugin-transform-es2015-destructuring/
babel-plugin-transform-es2015-duplicate-keys/
babel-plugin-transform-es2015-for-of/
babel-plugin-transform-es2015-function-name/
babel-plugin-transform-es2015-literals/
babel-plugin-transform-es2015-modules-amd/
babel-plugin-transform-es2015-modules-commonjs/
babel-plugin-transform-es2015-modules-systemjs/
babel-plugin-transform-es2015-modules-umd/
babel-plugin-transform-es2015-object-super/
babel-plugin-transform-es2015-parameters/
babel-plugin-transform-es2015-shorthand-properties/
babel-plugin-transform-es2015-spread/
babel-plugin-transform-es2015-sticky-regex/
babel-plugin-transform-es2015-template-literals/
babel-plugin-transform-es2015-typeof-symbol/
babel-plugin-transform-es2015-unicode-regex/
babel-plugin-transform-exponentiation-operator/
babel-plugin-transform-regenerator/
babel-plugin-transform-strict-mode/
babel-preset-env/
babel-runtime/
babel-template/
babel-traverse/
babel-types/
I'm guessing that at least one of them is "babel core"
So... how do I actually run babel from gulp? How do I run it at all?
I had the same issue. I resolved it by removing node_modules and I reinstalled packages (with yarn OR npm install). The problem was fixed.
In case Victor's answer doesn't help, it may be worth a try to clean your machine's package cache by running npm cache clean/yarn cache clean or removing the cache folder manually.

How do I check which babel version is on my windows 10 OS?

I need help to find which version of Babel is on my Windows Machine. I have installed it using
npm install --save-dev babel-cli babel-preset-env.
How do I check which version is on my Windows OS?
After you finish installing Babel, your package.json file should look like this:
{
"name": "my-project",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.0.0"
}
}
So you can find your Babel version in this configuration file.
Try this at the command line:
npm list babel-cli
You can also check the version of babel-cli by finding the babel-cli folder in node_modules and looking at the version property of the package.json that is at the base of that folder.
If babel-cli was installed globally via -g flag of npm install, you could check the version by executing command babel --version.
Hopefully the helps!
As the babel is updated to babel 7,
check using
npm list #babel/cli
or
npm list #babel/core
possibly your local ./node_modules/.bin is not in $PATH check out
this previous question for further info.
babel --version
You can figure this out by typing in the command line:
babel --help, look over the output and you can see other options that you might need.
Good luck

Install specific branch from github using Npm

I would like to install bootstrap-loader from github in my project using npm
Currently they are maintaining two version of this project which are comaptible with webpack version 1 and 2.
I would like to install version 1. What npm command I should use to install this?
I tried using below one but it is not working.
npm install git://github.com/shakacode/bootstrap-loader.git[#v1] --Save
There are extra square brackets in the command you tried.
To install the latest version from the brach-name branch, you can use:
npm install "https://github.com/shakacode/bootstrap-loader.git#branch-name" --save
npm: npm install username/repo#branchName --save
yarn: yarn add username/repo#branchName
e.g. npm i betimer/rtc-attach#master --save (my username is betimer)
// this will appear in your package.json:
"rtc-attach": "github:betimer/rtc-attach#master"
One thing I also want to mention: it's not a good idea to check in the package.json for the build server auto pull the change. Instead, put the npm i (first command) into the build command, and let server just install and replace the package.
One more note, if the package.json private is set to true, may impact sometimes.
you can give git pattern as version, yarn and npm are clever enough to resolve from a git repo.
yarn add any-package#user-name/repo-name#branch-name
or for npm
npm install --save any-package#user-name/repo-name#branch-name
Another approach would be to add the following line to package.json dependencies:
"package-name": "user/repo#branch"
For example:
"dependencies": {
... other dependencies ...
"react-native": "facebook/react-native#master"
}
And then do npm install or yarn install
I'm using SSH to authenticate my GitHub account and have a couple dependencies in my project installed as follows:
"dependencies": {
"<dependency name>": "git+ssh://git#github.com/<github username>/<repository name>.git#<release version | branch>"
}
Had to put the url in quotes for it work
npm install "https://github.com/shakacode/bootstrap-loader.git#v1" --save
Tried suggested answers, but got it working only with this prefix approach:
npm i github:user/repo.git#version --save -D
Only solution working for me:
$ npm i https://github.com/{USER}/{REPO}/tarball/{BRANCH} --save
as explained here.
Both below versions work for me as of beginning of 2023:
npm i "github:shakacode#bootstrap-loader"
npm i "https://github.com/shakacode/tree/bootstrap-loader/"
The Doc of the npm defines that only tag/version can be specified after repo_url.
Here is the Doc: https://docs.npmjs.com/cli/install

How to compile and run an ES6 file with node when using babel6?

I installed the latest version 6 of babel, babel-core and babel-loader.
How can I run an ES6 file in Node with Babel6?
Previously I would run the command
babel-node server.js
but now I get this message:
The CLI has been moved into the package `babel-cli`. See http://babeljs.io/docs/usage/cli/.
None of the instructions on that page say how to do this.
The message could be clearer. You've installed the babel package and you should have installed the babel-cli package.
npm uninstall babel
npm install babel-cli
Upon installing babel-cli I also had to specify the es2015 loader and to specifically use my local babel-node package since I don't have it installed globally.
./node_modules/.bin/babel-node --presets es2015 server.js

How to use sinon on karma?

I'm trying to use karma, chai and sinon to test spy.
I did:
npm install karma-sinon --save-dev
I added:
frameworks: ['mocha','chai','chai-sinon']
I run:
karma start
But I'm getting this error:
Error: No provider for "framework:chai-sinon"! (Resolving: framework:chai-sinon)
I had the same problem by simply adding the chai entry to the Frameworks section of my karma.conf.js script did not solve the problem. Following this Github Issue I found that you need to install the karma-cli globally, and everything else can be local and work.
npm install --save-dev karma
npm install -g karma-cli
npm install --save-dev karma-phantomjs-launcher karma-chai karma-sinon
During going through PluralSight course on Gulp I've come into the same problem.
This issue was due to lack of npm modules that are required. The string that helped me is this:
npm install --save-dev karma karma-chai karma-chai-sinon karma-chrome-launcher karma-coverage karma-growl-reporter karma-mocha karma-phantomjs-launcher karma-sinon mocha mocha-clean sinon-chai sinon phantomjs
Initially I've misspelled the karma-chai-sinon as karma-chai sinon so it successfully installed every dependency but resulted in the error.
So please try it. I've got the same error.
Did you add the 'karma-chai-sinon' to your plugins in your karma.conf.js
My plugins looks like this:
plugins: [ 'karma-chai-sinon', 'karma-mocha', 'karma-phantomjs-launcher', 'karma-babel-preprocessor' ]
I've had the same problem by simply adding the chai entry to the Frameworks section of my karma.conf.js script did not solve the problem, it's the same other frameworks that you point into frameworks array.
Have you installed the "karma-sinon-chai" npm package
Have you tried it?
e.g. npm install karma-simon-chai --dev-save