This is my gulpfile code:
gulp.task('react', function () {
browserify('app/src/main.jsx')
.transform(reactify)
.transform(babelify)
.bundle()
.pipe(source('app.js'))
.pipe(streamify(uglify()))
.pipe(gulp.dest('dist/js/'));
});
Only the first transform statement runs, and therefor throws an error due to the lack of additional transform (I'm writing in ES6 and JSX w/ react).
I'm at a complete loss and would really appreciate help.
Reactify should no longer be used. You don't say what version you are on, but as of Babel 6 "preset's" are the standard way to achieve compilation.
Run the following
npm install save-dev babel-preset-react babel-preset-es2015
You should also make sure Babelify is up to date. Then your Gulp config becomes
var babelify = require("babelify");
gulp.task('react', function () {
browserify('app/src/main.jsx')
.transform(babelify, {presets: ["es2015", "react"]})
.bundle()
.pipe(source('app.js'))
.pipe(streamify(uglify()))
.pipe(gulp.dest('dist/js/'));
});
See the options page for more information.
Related
When I try to import Jquery like
import $ from 'jquery';
inside test file
or like
import $ from 'jquery'; global.$ = global.jQuery = $;
inside the Jest setup file, I get error as
● Runtime Error- SyntaxError: Unexpected identifier
at new Function (<anonymous>)
at createMockFunction (node_modules/jest-mock/build/index.js:179:10)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
How to fix this issue? Checked the path and node_modules for Jquery both are fine. using Jest version "^14.1.0".
I have a newer version of Jest (v24.7.0), so I'm not sure this answer works with the Jest version used in the question.
From a note on Jest documentation:
Note: babel-jest is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project.
I found the solution on the Jest documentation itself:
Install these dependencies: npm install --save-dev babel-jest #babel/core #babel/preset-env
Add a configuration file for Babel similar to this one in your project's root directory:
// babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
Try using #babel/preset-env. Here's an example .babelrc:
{
"env": {
"test": {
"presets": [["#babel/preset-env"]]
}
}
}
You can add additional configuration options, of course; the important part is that #babel/preset-env is set as a preset in your env.test object.
I have a Gulp script with which I am trying to launch a React application.
The Gulp file is named gulpfile.babel.js
I am adding the Babel preset 'env' as an option
There is also a .babelrc file in the same directory with the same preset option
The Gulp file includes:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const babel = require('gulp-babel');
// convert jsx to JS
gulp.task('babelFiles', function() {
return gulp.src('js/*.#(js|jsx)')
.pipe(babel({
compact: false,
presets: ['env'],
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}));
});
// Default task
gulp.task('default', ['babelFiles', 'browserSync']);
// Configure the browserSync task
gulp.task('browserSync', ['babelFiles'], function() {
browserSync.init({
server: {
baseDir: ''
},
})
})
When the Gulp task launches I see an error about an unexpected token:
29 | return (
> 30 | <div>
| ^
This tells me something is wrong with the JSX transpilation in the react setup? Would you happen to know what the problem could be here?
babel-preset-env does not include a preset to transpile your JSX to plain JavaScript. For that you'll need babel-preset-react:
npm i --save-dev babel-preset-react
Then apply it:
presets: ['env', 'react']
babel-preset-env determines which plugins you'll need for your JavaScript, such as plugins for ES2015, 2016, and 2017. It does no, however, account for things such as JSX.
I'm trying to learn about gulp, browserify and react and have been knocking up a little test project. This was fine until I decided to implement some animations in there. Specifically this:
var React = require("react");
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
I'm getting an error because "React.addons" is null.
I also have the issue that my build is taking an age - between 20 secs and a minute. I think the reason is partly because react itself is being included in my bundle, whereas I would ideally like to retrieve it from a CDN (or at least keep it separate).
This is my gulpfile:
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('js', function () {
return browserify('./public/js/app.js', {
debug: false, bundleExternal: true
})
.transform(babelify, {"presets": ["es2015", "react"]})
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('./build/js/'));
});
If I set "bundleExternal" to false then it does stop react being included in my js - but then nothing works because "react" is not found. I found something about browserify-shims but couldn't get it to work from gulp. And wasn't sure if it was the right way to go?
Apologies for the newbie question!
To include ReactCSSTransitionGroup you need to install it first:
npm install react-addons-css-transition-group
Then just require it:
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
I am setting up an angular project with browserify.
I have a gulp task that take all vendor modules from bower_components directory and put them in a bundle:
gulp.task('dependencies', function () {
return browserify({
entries: [dependencies.js],
})
.transform(debowerify)
.bundle()
.pipe(source(config.filenames.release.dep))
//.pipe(streamify(uglify()))
.pipe(gulpif(release,
gulp.dest(config.paths.dest.release.scripts),
gulp.dest(config.paths.dest.build.scripts)));
The dependencies.js file contains this code:
'use strict';
// bower dependencies (can be edited in package.json)
var angular = require('angular');
require('angular-ui-router');
Everything works fine. Now I try to change the ui-router with angular-new-router.
My new dependencies.js (My gulp task doesn't change):
'use strict';
// bower dependencies (can be edited in package.json)
var angular = require('angular');
require('angular-new-router');
And for information here's my bower.json file:
{
"name": "test",
"private": true,
"dependencies": {
"angular": "~1.4.x",
"angular-new-router": "*",
"angular-ui-router": "*"
}
}
With this new config browserify return a weird error:
: Cannot find module
'./....\bower_components\angular-new-router\angular-new-router.js'
from
'D:\Devs\sharefun\WebApplication2\src\WebApplication2\client\modules'
at D:\Devs\sharefun\WebApplication2\src\WebApplication2\node_modules\browserify\node_modules\resolve\lib\async.js:55:21
at load (D:\Devs\sharefun\WebApplication2\src\WebApplication2\node_modules\browserify\node_modules\resolve\lib\async.js:69:43)
at onex (D:\Devs\sharefun\WebApplication2\src\WebApplication2\node_modules\browserify\node_modules\resolve\lib\async.js:92:31)
at D:\Devs\sharefun\WebApplication2\src\WebApplication2\node_modules\browserify\node_modules\resolve\lib\async.js:22:47
at Object.oncomplete (fs.js:107:15)
What I find weird is that browserify is looking for bower_components\angular-new-router\angular-new-router.js instead of bower_components\angular-new-router\index.js
you kind of have the answer, specify full path to index.js. try
require(angular-new-router/index.js);
or
import 'angular-new-router/index.js'; for ES6
to anyone who is having this problem now it might be useful to know that new router package is not updated anymore but you can get it from angular project.
the latest example working with angular 1.5, components() and child routes can be found here:
http://plnkr.co/edit/N3YP3dKMuljpZ6mWsVBT?p=preview
I am looking for a working recipe that can minify my AngularJS code and still provide a source map. Currently I have this gulp task but minification won't work:
gulp.task('browserify', function(cb) {
var bundler = browserify({
entries: [paths.browserEntry],
globals: false,
debug: !settings.PRODUCTION
})
bundler
.bundle()
.on('error', cb)
.on('log', util.log)
.pipe(gulpif(!settings.PRODUCTION, mold.transformSourcesRelativeTo(paths.js)))
.pipe(source(paths.js))
.pipe(buffer()) // because the next steps do not support streams
.pipe(concat('bundle.js'))
.pipe(gulpif(settings.server.minify.js, rename({suffix: '.min'})))
.pipe(gulpif(settings.server.minify.js, uglify()))
.pipe(gulp.dest(paths.js))
.on('end', function() {
cb()
})
})
Any clues?
You may see an example here. The example will output a minified bundle.min.js plus a bundle.map. The crucial points which makes the example works:
Installed debowerify
Installed minifyify
package.json - added transform property
"browserify": {
"transform": [
"debowerify"
]
}
Gruntfile.js - using preBundleCB to make minifyify work
preBundleCB: function (b) {
b.plugin( minifyify,
{ output: './dist/bundle.map',
map:'bundle.map'
});
}
Hope the example is useful to you.