Trying to set up Babel for React/JSX.
I've set up a package.json file and used NPM to install babel-cli and babel-preset-react.
~~from my package.json file~~
"babel": {
"presets": [
"react"
]
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-preset-react": "^6.24.1"
},
"dependencies": {
"#babel/polyfill": "^7.2.5"
}
I should be able to type (at the command line):
$ babel --version
and get a result. Instead, I get:
-bash: babel: command not found
Any ideas how to fix this? I want to start compiling ES6 JavaScript and JSX to regular JavaScript.
You'll need to install babel globally for it to become available as a bash command. npm install -g babel.
Alternatively to installing it globally the executable will be in the node_modules path. ./node_modules/.bin/babel
If you're using it apart of webpack or some other build tool your config should be OK.
Related
I'm developing an application in Vue, also using the x-ray-scraper library, but when I try to run npm run serve in the console to view the application locally I get the following error:
This dependency was not found:
* _http_common in ./node_modules/http-outgoing/index.js
To install it, you can run: npm install --save _http_common
Then I tried to run the command npm install --save _http_common and again I get an error:
npm ERR! code ETARGET
npm ERR! notarget No matching version found for undefined#_http_common.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
Without the x-ray-scraper library, everything starts up fine, but if I include it in my project, errors appear.
Perhaps the error is related to the version, but I don't understand how to fix it.
My package.json looks like:
{
"name": "pc-components",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.21.0",
"cheerio": "^1.0.0-rc.3",
"core-js": "^3.6.5",
"dns": "^0.2.2",
"phantom": "^6.3.0",
"selenium-webdriver": "^4.0.0-alpha.8",
"vue": "^2.6.11",
"webpage": "^0.3.0",
"x-ray-scraper": "^3.0.6"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.11"
}
}
Thanks for any help.
The issue has nothing to do with the import statement, nor are there any issue with the dependencies you have installed.
This is my test:
npm init into any directory you want
npm install x-ray-scraper
Then:
const x = require("x-ray-scraper");
x('google.com', 'title')
.then((title) => {
console.log(title); // Google
});
// logs Google
You need a simple backend, even a couple of lines long, in order to initiate the service and use the package.
You can use whatever you like in the front-end, Vue, React, etc.
You do not need any extra dependencies at all from what you already have.
Please read the docs to see use cases
I have a package.json
"dependencies": {
"#babel/core": "7.2.2",
"#babel/preset-env": "7.3.1",
"#babel/register": "7.0.0",
"babel-loader": "8.0.5",
"browser-sync": "^2.26.0",
"#hot-loader/react-dom": "^16.8.6",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-hot-loader": "^4.12.13",
"webpack": "^4.41.0",
"glob": "^7.1.6",
"args": "^5.0.1",
"webpack-dev-middleware": "^3.7.2",
"webpack-hot-middleware": "^2.25.0"
},
I have two build processes:
Build A - standard app.
git clone <myrepo.git>
npm install
npm run build-app
deploy
Build B - static files
git clone <myrepo.git>
npm install glob args // I want to read this from package.json
npm run build-static
deploy-static
What I would like is to group dependencies into two groups.
The reason is installing all the dependencies takes about ~2mins. For second build task, I only need 2-3 packages which takes less than 10 seconds. Currently, I have npm install glob args hardcoded in my build program. I want to read it from the same package.json.
I cannot use dependencies vs dependencies because I have some dependencies used just for development and use the flag npm install --production to install only the required dependencies (without devDependencies).
You can surely group them; there are two types of dependencies, one's dev and the other one is production. Here's a reference: https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file
If you want to create more than two, check this package out: https://www.npmjs.com/package/group-dependencies
I'm working on a JS library and I want to transpile all javascript code written in ES6 to ES5 standard to get more support in current browsers.
The thing is I want to use Babel with the Gulp tasks, so I've installed all this NPM packages [package.json]:
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"babel-cli": "^6.26.0",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-terser": "^1.1.5"
}
Next my .babelrc file has the following content:
{
"presets": ["env"]
}
And the gulpfile.js is written as following:
const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const terser = require('gulp-terser');
gulp.task('minify', function () {
return gulp.src('src/app/classes/*.js')
.pipe(sourcemaps.init())
.pipe(babel()) // I do not pass preset, because .babelrc do exist
.pipe(concat('output.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('build/js'))
});
gulp.task('default', ['minify']);
The issue is when I execute the gulp command on the project root directory, it not produce output file. The console shows a successful execution but nothing appears inside build/js directory, or neither inside another directory of the project.
#user1:/project-route$> gulp
[17:36:54] Using gulpfile /project-route/gulpfile.js
[17:36:54] Starting 'minify'...
I also tried without sourcemaps functions and the result is the same, nothing!!!.
For an extrange reason, when I execute in terminal babel -V the result is:
#user1:/project-route$> gulp
6.26.0 (babel-core 6.26.3)
This is not the same version I installed (that I remember):
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
So, I uninstalled all this dependencies:
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"gulp-babel": "^8.0.0",
And I installed this ones in replacement:
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"gulp-babel": "^7.0.1",
And all functions works now!!!
Of course, the explanation is accordingly to this note on the README.md of the gulp-babel plugin, realizing about this matter cost me a lot of headaches:
Install guide (gulp-babel on GitHub)
Install
Install gulp-babel if you want to get the pre-release of the next
version of gulp-babel.
# Babel 7
$ npm install --save-dev gulp-babel #babel/core #babel/preset-env
# Babel 6
$ npm install --save-dev gulp-babel#7 babel-core babel-preset-env
I have this in my package.json:
"devDependencies": {
...
"babel-cli": "^6.8.0",
"babel-core": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
...
}
And this in my .babelrc:
{
"presets": [
"react",
"es2015",
"stage-2"
]
}
When running babel --source-maps=true --out-dir=lib src I get this:
$ ./node_modules/.bin/babel --source-maps=true --out-dir=lib src
ReferenceError: [BABEL] src/main.js: Unknown option: /dev/my-project/.babelrc.presets
I have babel-cli 6, so why doesn't it recognize .babelrc.presets?
Answering my own question because I was trying to solve this for a while and I thought it might be helpful for others:
The problem was a known npm v3 bug. Unlike npm v2, npm v3 will flatten the dependency tree, so there was a deep dependency in my project that was including babel v5 and npm was linking the binary to my ./node_modules/.bin directory, overwriting the binary coming from my devDependency ("babel-cli": "^6.8.0").
The fix is to rebuild this package once npm install has finished. You should add this to your package.json:
"scripts": {
...
"postinstall": "npm rebuild babel-cli",
...
}
I'm having issues installing Bower components using my Gruntfile.js. I can however install the Bower components fine using Bower command.
Installing Bower components using Bower command works fine.
bower install
I cannot however install Bower components using Grunt command
grunt bower:install
Hers's some details.
bower.json:
{
"name": "test",
"version": "0.0.2",
"dependencies": {
"angular": "latest",
"bootstrap": "latest",
"lodash": "latest",
"font-awesome": "latest"
},
"devDependencies": {
"angular-mocks": "latest"
}
}
.bowerrc:
{
"directory": "libs",
"json": "bower.json"
}
Gruntfile.js:
bower: {
install: {
options: {
install: true,
copy: false,
targetDir: './libs'
}
}
}
When I try to install Bower components using Grunt, I get the following errors:
Running "bower:install" (bower) task
...
bower validate 1.3.15 against git://github.com/angular/bower-angular.git#*
bower new version for git://github.com/angular/bower-angular.git#*
bower resolve git://github.com/angular/bower-angular.git#*
Fatal error: Arguments to path.join must be strings
Does anyone see what is wrong with my Gruntfile.js file and why I get this error when installing Bower components using Grunt?
Thanks.
Here's how I have my configuration which is working for me:
bower: {
install: {
options: {
targetDir: bowerDir,
install: true,
cleanTargetDir: false,
cleanBowerDir: false,
bowerOptions: {}
}
}
}
Also make sure you have the dependencies in your package.json file:
"devDependencies": {
"bower": "^1.3.1",
"grunt": "^0.4.5",
"grunt-bower-task": "^0.4.0",
"grunt-cli": "^0.1.13",
also try running these commands:
npm install grunt-cli --save-dev
npm install grunt-bower-task --save-dev