babel / babelify Goto Github PK
View Code? Open in Web Editor NEWBrowserify transform for Babel
License: MIT License
Browserify transform for Babel
License: MIT License
I'm having a bit of an issue using babelify with a watchify gulp task. Gist here: https://gist.github.com/gaving/c1dce867b8e4fa86e5c9
Versions:-
"babelify": "^5.0.3",
"browserify": "^9.0.2",
"watchify": "^2.4.0",
Gulp just hangs entirely and the CPU pegs at 100% until I have to SIGINT.
Are their any known issues with later browserify versions? Not sure if #27 is related.
I would like to do this:
import React from 'react';
However it gets compiled down to:
var React = require('react')["default"];
...which of course is undefined since that node module doesn't export "default".
Is there a way to use the ES6 syntax and have the compiled output drop the ["default"]
?
If I add "babelify" transform into package.json, an unexpected error occured.
code:
var a = {
b: function() {
// do nothing
}
};
result:
var a = {
b: function b() {
// do nothing
}
};
It will add the property name into function, hows it happened? did i set up a wrong setting?
Just tried to upgrade, and I'm hitting this error: ReferenceError: Unknown option: _flags while parsing file: ...
Must be connected to browserify's _flags
mentioned at the bottom of this section: https://github.com/substack/node-browserify#btransformtr-opts ???
I'm interested in this project and foremost in CLI usage. It makes possible for me to remove "middleman" build
folder where I keep ES5 files and handle them further with browserify.
Cut one build step โ isn't that exciting?!
But I just can't run this with browserify.
I've tried several command variations and all of them fail on React JSX syntax.
$ browserify -d -e frontend/app/app.js -t [ babelify --experimental --sourceMapRelative . ]
$ browserify -d -e frontend/app/app.js -t babelify
$ browserify frontend/app/app.js -t babelify
...
Error: Parsing file /Users/xxx/demo/node_modules/frontend/robot/components/index.js: Unexpected token (21:6)
(21:6) position is the beginning of JSX syntax.
This happens if file with JSX syntax is not TOP-level
Documentation of Browserify (https://github.com/substack/node-browserify) separates
-t
and -g
transformations, though their descriptions are not clear to me.
When I replace -t
with -g
, everything fails with different error:
$ browserify -d -e frontend/app/app.js -g [ babelify --experimental --sourceMapRelative . ]
$ browserify -d -e frontend/app/app.js -g babelify
$ browserify frontend/app/app.js -g babelify
...
ReferenceError: Unknown option: global while parsing file: /Users/xxx/demo/frontend/app/app.js
I don't know how to define those transformations in correct way. Please document.
I'm using 6to5ify with {experimental: true}
passed to the configure method. Here's a script I'm using to create a bundle:
var browserify = require('browserify');
var to5ify = require('6to5ify');
var brfs = require('brfs');
var fs = require('fs');
var path = require('path');
var uglifyify = require('uglifyify');
var devPath = path.join(__dirname, 'frontend', 'scripts', 'main.js');
browserify()
.transform(to5ify.configure({experimental: true}))
.transform(brfs)
.transform({global: true}, uglifyify)
.require(devPath, {entry: true})
.bundle()
.pipe(fs.createWriteStream(path.join(__dirname, 'build', 'bundle.js')));
When using the bundle, I get the aforementioned error. Is this an issue with the experimental flag?
I'm requiring some node modules that are written in es6. I have been searching for a way to do this since browserify does not run transforms on modules from the node_modules folder by design.
The options I have seen are to add a browserify attribute the to modules package.json, which seems like a bad idea since it is not a module I have created. The other option I found was to use transform({global: true}, babelify), but I get a compile error if I do this "ReferenceError: Unknown option: global while parsing file: /Users/...". Would greatly appreciate any guidance in figuring out how to do this.
Ref babel/babel#133
Since browserify transforms can include other files, 6to5 should be limiting itself to a default set of files (.js
, .es6
, .jsx
, others?)
Currently the runtime
option does not add runtime.js
to the browserified bundle. The runtime is neither accessible through require('6to5ify').runtime
or require('6to5ify/runtime')
.
What is the best practice to include the runtime into the bundle?
Please release version 1.0.0
or at leat 0.x
.
Using 0.0.x
is a pain to deal with.
Paste this into the REPL.
class A {
constructor(name) {
this._name = name;
}
sayHi() {
console.log(`Hi, I'm ${this._name}`);
}
}
class B extends A {}
var a = new A("foo");
a.sayHi();
var b = new B("foo");
b.sayHi();
Expected output:
Hi, I'm foo
Hi, I'm bar
Output:
Hi, I'm foo
Hi, I'm [object Object]
Perhaps when using watchify only the file changed should update ?
gulp.task('browserify', function(callback){
function createBundle(b_config){
var bundler = browserify(b_config.entry, {
debug: true,
});
if( global.isWatching ){
// console.log("Uses watchify");
bundler = watchify(bundler);
bundler.on('update', bundle);
}
bundler.transform(to5);
var reportFinsihed = function(){
bundleLogger.end(b_config.outputName);
if( bundleQueueLen ){
bundleQueueLen --;
if( bundleQueueLen === 0 ){
callback();
}
}
};
function bundle(){
// Create a logger when it starts logging
bundleLogger.start(b_config.outputName);
return bundler.bundle()
.on('error', handleErrors)
.pipe(source(b_config.outputName))
.pipe(gulp.dest(b_config.dest))
.on('end', reportFinsihed);
}
bundle();
}
var bundleQueue = config.bundleConfigs;
var bundleQueueLen = bundleQueue.length;
bundleQueue.forEach(createBundle);
});
But when doing that, It usually takes 8 - 10 seconds to build. And goes over every single file in the app repo which are unchanged. (Found by running DEBUG=babel gulp && gulp browserify
)
Any suggestions ?
I am trying to use babelify 5.0.4 with browserify/watchify and receiving the following error:
Error: Cannot find module 'lodash/lang/clone'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Dev/Projects/angular-browserify-seed/node_modules/babelify/index.js:2:15)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
Here is the task in my Gulpfile that is causing the error:
gulp.task('watchify', function () {
var appBundler = watchify(browserify('./app/app.js', watchify.args));
appBundler.transform(babelify);
function rebundle() {
return appBundler.bundle()
.pipe(source(appBundleName))
.pipe(gulp.dest('./app/bundle'));
}
appBundler.on('update', rebundle);
return rebundle();
});
I'm trying to replace CoffeeScript to ES6 in my project. It's Cordova based project which uses gulp + bower + browserify + marionette.js and some other libs. I ran into a problem, third-party libraries (for example Backbone) complain on 'use strict'. If I'm not mistaken It's because browserify compile project into one file and wraps each dependency with 'use strict' mode. How can I fix it? Here is my browserify config and apps start file. This configuration with coffeify works correct.
path = require('path')
gulp = require('gulp')
source = require('vinyl-source-stream')
buffer = require('vinyl-buffer')
browserify = require('browserify')
remapify = require('remapify')
watchify = require('watchify')
notify = require('gulp-notify')
cdv = require('cordova-lib').cordova.raw
config = require('../config')
root = process.cwd()
buildDir = path.join(root, config.buildDir)
babelify = require('babelify')
gulp.task 'browserify', ->
bundler = browserify(
cache: {}
packageCache: {}
fullPaths: true
debug: config.isDevelopment()
extensions: ['.jade']
entries: "./#{config.appDir}/scripts/main.js"
)
.plugin(remapify, [
src: '**/*.js'
expose: 'scripts'
cwd: "./#{config.appDir}/scripts"
])
.plugin(remapify, [
src: '**/*.jade'
expose: 'templates'
cwd: "./#{config.appDir}/templates"
])
.transform('browserify-shim')
.transform('jadeify')
.transform(babelify.configure(
extensions: ['.js']
sourceMapRelative: "./#{config.appDir}"
))
bundle = ->
bundler.bundle()
.on('error', notify.onError())
.pipe(source('application.js'))
.pipe(buffer())
.pipe(gulp.dest(config.publicDir))
.on('end', ->
process.chdir(buildDir)
cdv.prepare().then ->
process.chdir(root)
)
watchify(bundler).on('update', bundle) if config.isDevelopment()
bundle()
For proper libraries connection I'm using 'browserify-shim' package.
import 'backbone-routefilter';
import 'backbone-stickit';
import 'backbone-validation';
import 'backbone-nested-model';
import 'marionette';
import 'velocity-ui';
import {App} from 'scripts/app';
document.addEventListener('deviceready', (function() {
let app = new App();
app.start();
}), false);
It seems that the transpiler doesn't respect setting defaults for arguments the ES6 way. So here:
constructor(data, element, type = 'spline'){
super(data, element);
}
If another value is given to the type
argument, it still reverts to 'spline'
. Done the current JS way, however:
constructor(data, element, type){
this.type = type || 'spline';
super(data, element);
}
Does produce the desired result. This is minor, but I just thought I'd bring it to your attention.
Oddly enough, babelify 5.0.x works perfectly fine me.
My set up:
In my gulp.js:
gulp.task('browserify', function() {
var aliases = aliasify.configure({
aliases: {
'config': './config' + config + '.json'
},
appliesTo: {
'includeExtensions': ['.js', '.jsx']
}
})
.require(require.resolve('./src/scripts/index.jsx'), { entry: true })
.transform(babelify)
.transform(aliases)
I receive this error:
{ [SyntaxError: /config.json: Unexpected token (2:11) while parsing file: /config.json]
pos: 13,
loc: { line: 2, column: 11 },
raisedAt: 14,
Config.json
{
"API_URL": "http://api....",
}
Everything still works fine, it's just throwing errors with a JSON file that is included with aliasify. Ideas?
This line: https://github.com/babel/babelify/blob/master/index.js#L14
means that it is impossible to pass ignore: false
, as is mentioned in the docs here: https://babeljs.io/docs/usage/require/
When I generate source maps, any code that has JSX gets offset and breakpoints no longer line up to their respected source lines anymore. Is there an option I am missing? Is this a known limitation right now? If other people are not experiencing this issue maybe they could post their gulp task. Below is the gulp task I am currently using:
gulp.task('client', function() {
var bundler = browserify('./app/main.js', { debug: global.isWatching, cache: {}, packageCache: {}, fullPaths: true, delay: 0 });
function rebundle() {
return bundler
.bundle()
.on('error', notify.onError())
.pipe(source(p.bundle))
.pipe(gulp.dest(p.distJs))
.pipe(reload({stream: true}));
}
if(global.isWatching) {
bundler = watchify(bundler);
bundler.on('update', rebundle);
}
bundler.external(libs.map(function(lib) { return lib.lib; }));
bundler.external(libs.map(function(lib) { return lib.expose; }));
bundler.transform(to5.configure({ignore: /interpolate.js$/, extensions: [".jsx"], sourceMap: true}));
return rebundle();
});
Thanks for any help and the great library,
Sandy
transform
isn't properly exported (babel.transform
is undefined) and this shows up when using babelify with isparta. Babel 4.5.5 works, 4.6.0 4.6.1 doesn't
TypeError: Cannot read property 'transform' of undefined while parsing file: test.js
at Instrumenter.instrumentSync (node_modules\isparta\lib\instrumenter.js:49:37)
at Instrumenter.instrument (node_modules\isparta\node_modules\istanbul\lib\instrumenter.js:542:37)
at Stream.<anonymous> (node_modules\browserify-istanbul\index.js:24:20)
at _end (node_modules\browserify-istanbul\node_modules\through\index.js:65:9)
at Stream.stream.end (node_modules\browserify-istanbul\node_modules\through\index.js:74:5)
at Transform.onend (node_modules\browserify\node_modules\module-deps\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:523:10)
at Transform.g (events.js:199:16)
at Transform.emit (events.js:129:20)
at node_modules\browserify\node_modules\module-deps\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:965:16
at process._tickCallback (node.js:355:11)
In version 6.0.0, the ignore property passed to babelify.configure() is deleted by the time File.prototype.shouldIgnore is executed on vendor, ES5 code. This results in jQuery et al being parsed with babel instead of ignored.
In my gulpfile, I have a preprocessing task like so:
var gulp = require('gulp');
var transform = require('vinyl-transform');
var browserify = require('browserify');
gulp.task('preprocess:js', function () {
return gulp.src(['./src/js/index.js'])
.pipe(transform(function (filename) {
return browserify()
.transform(require('babelify'))
.require(filename, { entry: true })
.bundle();
}))
.pipe(gulp.dest('./dist/js'));
});
Running the task, I get the following stack trace:
Error: write after end
at writeAfterEnd (/Users/problematic/dev/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:161:12)
at Labeled.Writable.write (/Users/problematic/dev/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:208:5)
at write (_stream_readable.js:602:24)
at flow (_stream_readable.js:611:7)
at _stream_readable.js:579:7
at process._tickCallback (node.js:442:13)
This error disappears if I comment out the transform(require('babelify')
line of the task.
Hello,
I'm using 6to5ify with Browserify to get modules working properly with the following task:
gulp.task('scripts', function() {
return gulp.src("js/main.js")
.pipe(browserify({
transform: [to5ify]
}))
.pipe(gulp.dest('./dist'));
});
This works just fine, but it throws the error ReferenceError: Can't find variable: Symbol
, caused by this conversion:
for (let myObject of myArray) {
// ...
}
becomes:
for (var _iterator = myArray[Symbol.iterator](), _step; !(_step = _iterator.next()).done;) {
var object = _step.value;
// ...
}
Symbol is defined nowhere. Should I just avoid using the for-of
-loop?
Greetings
Arne Bahlo
The 1.12.* of 6to5 has implemented a couple fixes for source maps that would be beneficial to have.
Apologies if this is for the wrong project since I haven't been able to do a direct 6to5 transform on the command line but this works in the 6to5 REPL.
In test.js:
var props = {a: 1, b: 2, c: 3};
var {a, ...other} = props;
I get the error
test.js:2
var { a, ...other } = props;
^
ParseError: Unexpected token
Using the command
browserify .\test.js -t [6to5ify --experimental --playground --whitelist es7.objectSpread] --outfile bundle.js
I've tried various combinations of the experimental, playground, and whitelist settings but to no avail.
Am I missing something?
Would it possible to have the .babelrc
file checked when running the browserify transform? This would allow compiler settings to live in a separate file vs. living in package.json or build scripts.
Thanks!!!!
I'm trying to combine 6to5ify with the transform brfs,
browserify index.es6 -t 6to5ify -t brfs > index.js
but all I'm getting back is Error: Line 1: Unexpected reserved word while parsing file:
which is, of course, the word import
. That's why I'm using es6, right? Any idea what I'm doing wrong? Thanks so much for any response you can give.
Using --outfile
doesn't change it.
I want to include the 6to5 polyfill to get support for Promises in older browsers but including the require("6to5ify/polyfill");
at the top of my main entry file for browserify I get the global not defined
error. I'm using browserify with gulp but the task is pretty much the same as the node example in the 6to5ify readme.
What is the correct way to enable the pollyfills when using 6to5ify?
Thanks!
node_modules
is ignored by default it seems.
Assuming I have symlinked my lib
directory to node_modules
, is there a way to still run that path through 6to5-browserify?
Also open to other suggestion on how to avoid require('../../../lib/stuff')
than with symlinks to node_modules
.
I'm not sure what the exact reason for this is, but I'm experiencing a very low performance in my incremental build process and narrowed it down to babelify.
I am using browserify in conjunction with watchify, which takes care of caching and only building stuff which really needs rebuilding. Without the babelify transformation, changing a single file (ca. 70 LOC) results in a 80 ms rebuild. With babelify it takes 3000 ms.
When hooking into the transformer and printing out the processed files, I notice that without babelify a simple change of app.jsx
only results in index.jsx
being processed.
With babelify a change of app.jsx
results in index.jsx
, app.jsx
and again index.jsx
being processed.
Do you have any idea how this could be resolved?
โ grunt browserify
Running "browserify" (browserify) task
Note: The code generator has deoptimised the styling of "index.js" as it exceeds the max of "100KB".
The babelify
used as transformation for grunt-browserify
options: {
transform: ['babelify']
}
How to skip this warning?
Since Babel updated to 4.6.0 I've been getting this error in my build. It was working fine yesterday and nothing else has changed on my local setup (it broke the build on the server, which runs npm install
every time). The only option I'm passing is ignore, like this:
return browserify(filename)
.transform(babelify
.configure({
ignore: 'node_modules'
}))
.bundle();
Removing the configure
method from here fixes the build, otherwise I get this:
C:\Users\John\Sites\MyAccountWeb\node_modules\babelify\index.js:14
if (opts.ignore) opts.ignore = babel._util.regexify(opts.ignore);
^
TypeError: Cannot call method 'regexify' of undefined
at Function.browserify.configure (C:\Users\John\Sites\MyAccountWeb\node_modules\babelify\index.js:14:46)
at C:\Users\John\Sites\MyAccountWeb\gulp\tasks\scripts.js:21:18
at Transform.write [as _transform] (C:\Users\John\Sites\MyAccountWeb\node_modules\vinyl-transform\index.js:13:18)
at Transform._read (C:\Users\John\Sites\MyAccountWeb\node_modules\vinyl-transform\node_modules\through2\node_modules
\readable-stream\lib\_stream_transform.js:184:10)
at Transform._write (C:\Users\John\Sites\MyAccountWeb\node_modules\vinyl-transform\node_modules\through2\node_module
s\readable-stream\lib\_stream_transform.js:172:12)
at doWrite (C:\Users\John\Sites\MyAccountWeb\node_modules\vinyl-transform\node_modules\through2\node_modules\readabl
e-stream\lib\_stream_writable.js:237:10)
at writeOrBuffer (C:\Users\John\Sites\MyAccountWeb\node_modules\vinyl-transform\node_modules\through2\node_modules\r
eadable-stream\lib\_stream_writable.js:227:5)
at Transform.Writable.write (C:\Users\John\Sites\MyAccountWeb\node_modules\vinyl-transform\node_modules\through2\nod
e_modules\readable-stream\lib\_stream_writable.js:194:11)
at write (C:\Users\John\Sites\MyAccountWeb\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_module
s\readable-stream\lib\_stream_readable.js:623:24)
at flow (C:\Users\John\Sites\MyAccountWeb\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules
\readable-stream\lib\_stream_readable.js:632:7)
I was ignoring node_modules
to avoid Angular being processed and causing problems but it seems to be fine now without any config, does it ignore stuff by default now?
Thanks
I seem to be running in circles with this.
The original issue is in thlorenz/browserify-shim#145
If I run -t [browserify-shim]
and use normal CommonJS syntax require()
then the browserify bundle works perfectly.
If I run -t [babelify --only \"./index.js\" browserify-shim] and use es6
import` syntax I get an error within my imported shimmed dependency (polymer).
There's a simple demo here:
https://github.com/reggi/demo-browserify-polymer-es6
Why would it compile perfectly without babelify
and when I specify --only
it have a different effect on my included shimmed dependency?
This may be better posted in the browserify issues but how do you get browserify to watch files for a change and then run 6to5ify to recompile the changes?
Something is emitting an AST to stdout. For some reason it only happens in production (and it's breaking our deployment script, which uses stdout to pipe Browserify's output through the Google Closure compiler). Any idea what this could be? This is after a clean npm install
.
./node_modules/.bin/browserify -t 6to5ify --extension .jsx app/bundles/app.js --outfile /dev/null
{ type: 'XJSOpeningElement',
start: 1707,
end: 1732,
loc:
{ start: { line: 61, column: 6 },
end: { line: 61, column: 31 } },
range: [ 1707, 1732 ],
attributes:
[ { type: 'Property',
kind: 'init',
key: [Object],
value: [Object],
computed: undefined,
loc: [Object],
end: 1731,
range: [Object],
start: 1716,
leadingComments: [],
trailingComments: [] } ],
name:
{ type: 'Identifier',
start: 1708,
end: 1715,
loc: { start: [Object], end: [Object] },
range: [ 1708, 1715 ],
name: 'section' },
selfClosing: false }
[... lots more output ...]
Our shrinkwrap file, in case it helps: https://gist.github.com/atombender/2c1d523bc362324d3b7d.
Browserify transforms typically expose options with subarg syntax. e.g.
browserify -t [ foo --bar=555 ] main.js
Babelify pulls in all the external dependencies even though the browserify build has them set as external (since I'm building a seperate vendor library). I'm doing it like this (in gulp):
gulp.task('scripts:app', function() {
return gulp.src(['./src/js/app.js', './src/js/background.js', './src/js/browser-action.js'])
.on('error', gutil.log)
.pipe(plumber())
.pipe(transform(function(filename) {
return browserify({
transform: [
babelify
]
})
.external('react')
.external('react-router')
.external('lodash')
.external('reflux')
.external('moment')
// .external a lot of other 3rd party libs
.require(filename, {entry: true})
.bundle();
}))
.pipe(gulp.dest('./dist/src'));
});
Setting only
option seems to ignore building jsx files and I never got the ignore
option to work at all. I find it extra strange that babelify is pulling in modules from node_modules, since according to docs babel is supposed to ignore those by default.
It would be cool if we can have an updated version of babelify in npm so we can have some of the fixes since 5.0.3.
When using 6to5ify relative paths to users modules are turned into absolute ones in the source map. When using just browserify path to my test module in the source maps sources array is relative:
$ cat app/test.js
console.log('x')
$ ./node_modules/.bin/browserify -d -e app/test.js
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
console.log('x')
},{}]},{},[1])
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCJhcHAvdGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQ0FBO0FBQ0EiLCJmaWxlIjoiZ2VuZXJhdGVkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiBlKHQsbixyKXtmdW5jdGlvbiBzKG8sdSl7aWYoIW5bb10pe2lmKCF0W29dKXt2YXIgYT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2lmKCF1JiZhKXJldHVybiBhKG8sITApO2lmKGkpcmV0dXJuIGkobywhMCk7dmFyIGY9bmV3IEVycm9yKFwiQ2Fubm90IGZpbmQgbW9kdWxlICdcIitvK1wiJ1wiKTt0aHJvdyBmLmNvZGU9XCJNT0RVTEVfTk9UX0ZPVU5EXCIsZn12YXIgbD1uW29dPXtleHBvcnRzOnt9fTt0W29dWzBdLmNhbGwobC5leHBvcnRzLGZ1bmN0aW9uKGUpe3ZhciBuPXRbb11bMV1bZV07cmV0dXJuIHMobj9uOmUpfSxsLGwuZXhwb3J0cyxlLHQsbixyKX1yZXR1cm4gbltvXS5leHBvcnRzfXZhciBpPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7Zm9yKHZhciBvPTA7bzxyLmxlbmd0aDtvKyspcyhyW29dKTtyZXR1cm4gc30pIiwiY29uc29sZS5sb2coJ3gnKVxuIl19
$ echo eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCJhcHAvdGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQ0FBO0FBQ0EiLCJmaWxlIjoiZ2VuZXJhdGVkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiBlKHQsbixyKXtmdW5jdGlvbiBzKG8sdSl7aWYoIW5bb10pe2lmKCF0W29dKXt2YXIgYT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2lmKCF1JiZhKXJldHVybiBhKG8sITApO2lmKGkpcmV0dXJuIGkobywhMCk7dmFyIGY9bmV3IEVycm9yKFwiQ2Fubm90IGZpbmQgbW9kdWxlICdcIitvK1wiJ1wiKTt0aHJvdyBmLmNvZGU9XCJNT0RVTEVfTk9UX0ZPVU5EXCIsZn12YXIgbD1uW29dPXtleHBvcnRzOnt9fTt0W29dWzBdLmNhbGwobC5leHBvcnRzLGZ1bmN0aW9uKGUpe3ZhciBuPXRbb11bMV1bZV07cmV0dXJuIHMobj9uOmUpfSxsLGwuZXhwb3J0cyxlLHQsbixyKX1yZXR1cm4gbltvXS5leHBvcnRzfXZhciBpPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7Zm9yKHZhciBvPTA7bzxyLmxlbmd0aDtvKyspcyhyW29dKTtyZXR1cm4gc30pIiwiY29uc29sZS5sb2coJ3gnKVxuIl19 | base64 --decode
{"version":3,"sources":["node_modules/browserify/node_modules/browser-pack/_prelude.js","app/test.js"],"names":[],"mappings":"AAAA;ACAA;AACA","file":"generated.js","sourceRoot":"","sourcesContent":["(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})","console.log('x')\n"]}
Adding 6to5ify turn the path app/test.js
to an absolute path:
$ ./node_modules/.bin/browserify -d -e app/test.js -t 6to5ify
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";
console.log("x");
},{}]},{},[1])
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCIvVXNlcnMvaGlsenUvY29kZS9EZXN1c2l0ZS93b3JrZm9yY2UvYXBwL3Rlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7OztBQ0FBLE9BQU8sQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUEiLCJmaWxlIjoiZ2VuZXJhdGVkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiBlKHQsbixyKXtmdW5jdGlvbiBzKG8sdSl7aWYoIW5bb10pe2lmKCF0W29dKXt2YXIgYT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2lmKCF1JiZhKXJldHVybiBhKG8sITApO2lmKGkpcmV0dXJuIGkobywhMCk7dmFyIGY9bmV3IEVycm9yKFwiQ2Fubm90IGZpbmQgbW9kdWxlICdcIitvK1wiJ1wiKTt0aHJvdyBmLmNvZGU9XCJNT0RVTEVfTk9UX0ZPVU5EXCIsZn12YXIgbD1uW29dPXtleHBvcnRzOnt9fTt0W29dWzBdLmNhbGwobC5leHBvcnRzLGZ1bmN0aW9uKGUpe3ZhciBuPXRbb11bMV1bZV07cmV0dXJuIHMobj9uOmUpfSxsLGwuZXhwb3J0cyxlLHQsbixyKX1yZXR1cm4gbltvXS5leHBvcnRzfXZhciBpPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7Zm9yKHZhciBvPTA7bzxyLmxlbmd0aDtvKyspcyhyW29dKTtyZXR1cm4gc30pIiwiY29uc29sZS5sb2coJ3gnKVxuIl19
$ echo eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCIvVXNlcnMvaGlsenUvY29kZS9EZXN1c2l0ZS93b3JrZm9yY2UvYXBwL3Rlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7OztBQ0FBLE9BQU8sQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUEiLCJmaWxlIjoiZ2VuZXJhdGVkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiBlKHQsbixyKXtmdW5jdGlvbiBzKG8sdSl7aWYoIW5bb10pe2lmKCF0W29dKXt2YXIgYT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2lmKCF1JiZhKXJldHVybiBhKG8sITApO2lmKGkpcmV0dXJuIGkobywhMCk7dmFyIGY9bmV3IEVycm9yKFwiQ2Fubm90IGZpbmQgbW9kdWxlICdcIitvK1wiJ1wiKTt0aHJvdyBmLmNvZGU9XCJNT0RVTEVfTk9UX0ZPVU5EXCIsZn12YXIgbD1uW29dPXtleHBvcnRzOnt9fTt0W29dWzBdLmNhbGwobC5leHBvcnRzLGZ1bmN0aW9uKGUpe3ZhciBuPXRbb11bMV1bZV07cmV0dXJuIHMobj9uOmUpfSxsLGwuZXhwb3J0cyxlLHQsbixyKX1yZXR1cm4gbltvXS5leHBvcnRzfXZhciBpPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7Zm9yKHZhciBvPTA7bzxyLmxlbmd0aDtvKyspcyhyW29dKTtyZXR1cm4gc30pIiwiY29uc29sZS5sb2coJ3gnKVxuIl19 | base64 --decode
{"version":3,"sources":["node_modules/browserify/node_modules/browser-pack/_prelude.js","/omitted/omitted/omitted/omitted/omitted/app/test.js"],"names":[],"mappings":"AAAA;;;ACAA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA","file":"generated.js","sourceRoot":"","sourcesContent":["(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})","console.log('x')\n"]}
Just using 6to5 doesn't exhibit this behaviour:
$ ./node_modules/.bin/6to5 app/test.js --source-maps-inline
"use strict";
console.log("x");
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC90ZXN0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQUEsT0FBTyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQSIsImZpbGUiOiJzdGRvdXQiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zb2xlLmxvZygneCcpXG4iXX0=
$ echo eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC90ZXN0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQUEsT0FBTyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQSIsImZpbGUiOiJzdGRvdXQiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zb2xlLmxvZygneCcpXG4iXX0= | base64 --decode
{"version":3,"sources":["app/test.js"],"names":[],"mappings":";;AAAA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA","file":"stdout","sourcesContent":["console.log('x')\n"]}
I do not want to expose my local directory structure in a source map that I'm going to push to production. Is there a way to prevent this behaviour?
I'm using 6to5ify 3.0.0 and browserify 8.0.3.
There are no dependency of browserify, many ones may accidentally update to the latest incompatible version.
https://github.com/substack/node-browserify/blob/master/changelog.markdown#700
This is a small breaking change since now transform objects live in the pipeline between the record and deps phases. This should only affect programs that expect records in the pipeline to only contain file objects.
Looks like 6to5-browserify expects exactly that.
When used with watchify, source maps for each updated file are duplicated, remapping the old file contents. Thus in the browser you may see already transformed files and duplicated source maps at the end:
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9...
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9......
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9.........
Each time the existent map is added to the new one.
Here is the consequences:
[23:38:21] Starting 'watchify'...
[23:38:24] 1126890 bytes written (3.38 seconds)
[23:38:24] Finished 'watchify' after 3.46 s
[23:38:31] 1128195 bytes written (0.36 seconds)
[23:38:32] 1131264 bytes written (0.40 seconds)
[23:38:33] 1138401 bytes written (0.39 seconds)
[23:38:34] 1155054 bytes written (0.35 seconds)
[23:38:36] 1193911 bytes written (0.36 seconds)
[23:38:38] 1284568 bytes written (0.42 seconds)
[23:38:46] 1496101 bytes written (0.46 seconds)
[23:38:47] 1989678 bytes written (0.57 seconds)
[23:38:49] 3141347 bytes written (0.85 seconds)
[23:38:51] 5828584 bytes written (1.37 seconds)
[23:38:54] 12098793 bytes written (2.37 seconds)
[23:39:07] 26729282 bytes written (4.65 seconds)
[23:39:32] 60867079 bytes written (21.01 seconds)
Don't think I've added extra 42 MB of code =), I just added a single colon after each save.
I like to symlink my local app
directory (or lib
, or wherever my js
lives) inside node_modules
to prevent the need for relative path soup when requiring local modules.
Substack talks about this here.
I've discovered that when using the 6to5ify transform with requires that follow a symlinked path, the required modules do not get transformed.
Haven't poked this too hard, so not sure if it's an issue with browserify, 6to5, or 6to5ify (or pebkac).
To reproduce from example repo:
npm i
npm run build
Compare the bundles. ES6 features persist in bundle_sym.js
, specifically in the file that was required through the symlink.
How would I go about requiring the polyfill that is included in 6to5 when using the browersify version?
Setting the ignore
option to something else still causes packages in node_modules
to be ignored.
{
optional: ['selfContained'],
experimental: true,
ignore: 'blarg'
};
If I'm requiring a file inside node_modules I still get
[15:55:50] gulp-notify: [Compile Error] Parsing file /Users/me/my-project/node_modules/some-repo-with-es6/src/file-with-es6.js: Unexpected token (37:22)
The transform is logging tons of JSON describing JSX elements. It looks like this:
{ type: 'XJSOpeningElement',
start: 611,
end: 640,
loc:
{ start: { line: 27, column: 3 },
end: { line: 27, column: 32 } },
range: [ 611, 640 ],
attributes:
[ { type: 'Property',
kind: 'init',
key: [Object],
value: [Object],
computed: undefined,
loc: [Object],
end: 639,
range: [Object],
start: 619,
leadingComments: [],
trailingComments: [] } ],
name:
{ type: 'Identifier',
start: 612,
end: 618,
loc: { start: [Object], end: [Object] },
range: [ 612, 618 ],
name: 'legend' },
selfClosing: false }
{ type: 'XJSOpeningElement',
start: 667,
end: 716,
loc:
{ start: { line: 30, column: 4 },
end: { line: 30, column: 53 } },
range: [ 667, 716 ],
attributes:
[ { type: 'Property',
kind: 'init',
key: [Object],
value: [Object],
computed: undefined,
loc: [Object],
end: 713,
range: [Object],
start: 681,
leadingComments: [],
trailingComments: [] } ],
name:
{ type: 'Identifier',
start: 668,
end: 680,
loc: { start: [Object], end: [Object] },
range: [ 668, 680 ],
name: 'RequiredMark' },
selfClosing: true }
{ type: 'XJSOpeningElement',
start: 437,
end: 484,
loc:
{ start: { line: 23, column: 3 },
end: { line: 23, column: 50 } },
range: [ 437, 484 ],
attributes:
[ { type: 'Property',
kind: 'init',
key: [Object],
value: [Object],
computed: undefined,
loc: [Object],
end: 483,
range: [Object],
start: 443,
leadingComments: [],
trailingComments: [] } ],
name:
{ type: 'Identifier',
start: 438,
end: 442,
loc: { start: [Object], end: [Object] },
range: [ 438, 442 ],
name: 'span' },
selfClosing: false }
If I use browserify/6to5ify via the JS API, all this junk outputs to the console but the compiled code seems to work fine. However, if I use the browserify CLI and 6to5ify, the junk shows up at the top of the compiled code.
Any idea what is going on?
Appeared after the fix for #67.
TypeError: undefined is not a function while parsing file: /Users/conrad/Developer/DateNighto/htmlVN/app/scripts/starfighter.js
at Object.list (/Users/conrad/Developer/DateNighto/htmlVN/node_modules/babel-core/lib/babel/util.js:105:18)
at list (/Users/conrad/Developer/DateNighto/htmlVN/node_modules/babel-core/lib/babel/transformation/file/option-parsers.js:41:15)
at File.normalizeOptions (/Users/conrad/Developer/DateNighto/htmlVN/node_modules/babel-core/lib/babel/transformation/file/index.js:126:31)
at new File (/Users/conrad/Developer/DateNighto/htmlVN/node_modules/babel-core/lib/babel/transformation/file/index.js:86:22)
at Object.transform (/Users/conrad/Developer/DateNighto/htmlVN/node_modules/babel-core/lib/babel/transformation/index.js:18:14)
at Stream.end (/Users/conrad/Developer/DateNighto/htmlVN/node_modules/babelify/index.js:34:25)
at _end (/Users/conrad/Developer/DateNighto/htmlVN/node_modules/babelify/node_modules/through/index.js:65:9)
at Stream.stream.end (/Users/conrad/Developer/DateNighto/htmlVN/node_modules/babelify/node_modules/through/index.js:74:5)
at Transform.onend (/Users/conrad/Developer/DateNighto/htmlVN/node_modules/browserify/node_modules/module-deps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:523:10)
at Transform.g (events.js:199:16)
it looks like the ignore RegExp is making it into the utils.list() function and it's just not having it. Thanks again!
I have a jsx file which is roughly the following:
let React = require('react');
module.exports = React.createClass({
getInitialState: () => { username: 'John Doe' },
render: () => {
return (<div>{this.state.username}</div>);
}
});
When I browserify my code, the outcome is:
var React = require('react');
module.exports = React.createClass({
getInitialState: function() {
return { username: 'John Doe' };
},
render: function() {
return React.createElement('div', null, undefined.state.username);
}
});
Notice the undefined.state.username
bit. Any idea where it comes from?
Thanks :-)
I'm attempting to use experimental features (specifically async-await) without explicitly importing the regenerator runtime. Using 6to5ify v3.1.2 and going by the 6to5 docs, I expect the following to do the job:
var b = browserify(options)
.transform(to5ify.configure({
experimental: true,
optional: ['selfContained']
}))
.require(devPath, {entry: true});
However, 6to5ify throws a wobbly about the transformer:
ReferenceError: unknown transformer selfContained specified in optional while parsing file: /Users/marke/some-project/frontend/scripts/main.js
at Function.transform._ensureTransformerNames (/Users/marke/some-project/node_modules/6to5ify/node_modules/6to5-core/lib/6to5/transformation/transform.js:28:13)
at Function.File.normaliseOptions (/Users/marke/some-project/node_modules/6to5ify/node_modules/6to5-core/lib/6to5/file.js:125:13)
at new File (/Users/marke/some-project/node_modules/6to5ify/node_modules/6to5-core/lib/6to5/file.js:17:32)
at Object.transform (/Users/marke/some-project/node_modules/6to5ify/node_modules/6to5-core/lib/6to5/transformation/transform.js:11:14)
at Stream.end (/Users/marke/some-project/node_modules/6to5ify/index.js:39:23)
at _end (/Users/marke/some-project/node_modules/6to5ify/node_modules/through/index.js:65:9)
at Stream.stream.end (/Users/marke/some-project/node_modules/6to5ify/node_modules/through/index.js:74:5)
at Transform.onend (/Users/marke/some-project/node_modules/browserify/node_modules/readable-stream/lib/_stream_readable.js:523:10)
at Transform.g (events.js:180:16)
at Transform.emit (events.js:117:20)
Since 6to5 has updated to 3.0.0, this causes the follow npm warning:
node_modules/6to5ify/node_modules/6to5-core requires lodash@'3.0.0' but will load
node_modules/6to5ify/node_modules/lodash,
which is version 2.4.1
I develop with watchify
running. The addition of 6to5ify
, though, is breaking that process, causing the following error:
FATAL ERROR: CALL_AND_RETRY_2 Allocation failed - process out of memory
Any ideas why this would be? I'm fairly certain that 6to5ify
is the culprit, because the memory error never occurred before I added this, and goes away if I switch back to reactify
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.