using browserify, i can transcompile es6 to es5 by adding this to package.json -> scripts.
How do i do it using webpack and npm script?
"build-modular": "browserify index.js -t babelify -o index-bundle.js"
In webpack instead of transforms you use loaders. Usually you configure loaders in a webpack configuration file. However, you can also bind loaders in the command line.
As you want to babelify your index.js file, you need to install the corresponding babel-loader and the required babel packages:
npm install --save-dev webpack babel-core babel-loader babel-preset-es2015
Now you are able to create your build script entry like this:
"build-modular": "webpack index.js index-bundle.js --module-bind 'js=babel?presets[]=es2015'"
And run it:
npm run build-modular
Related
What's the difference between npm run build and npm install webpack?
In what ways these commands differ
webpack is a module bundler for javascript application. In order to run webpack ypu need to get the webapck in your project.npm install webpack will install webpack from node module software library using npm install webpack command.
npm run build is a separate command to build the code. If you open package.json inside scripts you may see a key like build example
scripts:{
build:someValue
}
Our node environment requires that our JavaScript files be babeled. This is easy enough.
The difficult part is that we have .js, .jsx, .ts, .tsx files and this won't change.
Is there anything I could do to get the TypeScript files converted into JavaScript, and then have all the .js/.jsx files go through babel?
My current command:
nodemon app.js --exec babel-node --presets env,stage-2,react
I know that I need TypeScript to be converted somewhere in there.
Any ideas?
Node version: 8.11.1
With babel 7 you can use the typescript preset. You still need typescript to do the actual type checking, just the compilation to js will now be done by babel.
Here's what a simple setup might look like:
npm install --save-dev #babel/preset-typescript
Update the rest of the toolchain to babel 7 too (e.g. babel-cli to #babel/cli #babel/core, babel-preset-env to #babel/preset-env etc.)
Add "noEmit": true to your tsconfig.json. This ensures typescript only does type checking and doesn't output js.
Add --extensions '.js,.jsx,.ts,.tsx' to your command.
So your command becomes:
nodemon app.js --exec babel-node --presets #babel/env,#babel/stage-2,#babel/react,#babel/typescript --extensions '.js,.jsx,.ts,.tsx'
I'm packaging d3-color module for debian. Since rollup is not packaged yet, I'd like to use webpack as bundler. d3-color package.json has the following command to build the umd module.
rollup --banner \"$(preamble)\" -f umd -g d3-color:d3 -n d3 -o build/d3-interpolate.js -- index.js"
I want to know how to convert -g d3-color:d3 to webpack. I looked at Webpack equivalent for browserify shiming(global) of already included modules but that does not work.
https://anonscm.debian.org/cgit/pkg-javascript/node-d3-interpolate.git/log/?h=webpack (packaging source)
From https://webpack.js.org/guides/author-libraries/#externalize-lodash I tried this,
externals: {
'd3-color': {
commonjs: 'd3-color',
commonjs2: 'd3-color',
amd: 'd3-color',
root: '_'
}
}
and it seems to be working.
I am looking for a good way to do minification with browserify.
I am developing a react application trying to keep the build setup as simple as possible.
I am using browserify, babelify and watchify.
I do not want to use a task runner like grunt or gulp but just npm in order to keep the setup as simple as possible.
I would like to use the same parameters for browserify (production build) and watchify (during development). The compiled js during development should be exactly the same as in the production build (ie I want minification during development as well. And I want the strongest minification possible with browserify. I know there are other module loaders like rollup or systemjs that achieve even smaller outputs but that's not what I am interested in.
My current watch command looks like this:
watchify src/main.js -t babelify -t envify -o build/bundle.js -v
the corresponding build command looks like this:
browserify src/main.js -t babelify -t envify -o build/bundle.js -v
Note that all the parameters look the same. That's how I want to to be in order to keep the commands in sync in the future.
Now my question is how to add uglification/minification.
I tried adding uglifyify like this: -g [ uglifyify --no-sourcemap ] but there are still a lot of line breaks in the output so I guess it's not fully minified.
I also tried removing the -o parameter and piping the output throught uglifyjs as described here. This produces a smaller output but it does not work for the watchify command.
Take note that uglifyify runs the squeeze transform from uglifyjs but it recommends that you still use uglifyjs on the resulting output.
Uglifyify gives you the benefit of applying Uglify's "squeeze" transform on each file before it's included in the bundle, meaning you can remove dead code paths for conditional requires.
So to change your previous commands to include uglifyjs:
browserify src/main.js -t babelify -t envify -t uglifyify | uglifyjs -cm > build/bundle.min.js
watchify src/main.js -t babelify -t envify -t uglifyify -o 'uglifyjs -cm > build/bundle.min.js' -v
Notes
The --outfile / -o switch on the watchify command is able to accept shell commands as longs as they include a | or > character.
As you pipe the results after the bundle stage, uglifyjs has to work with the file as a whole rather than smaller chunks so you’ll lose some of the speed benefits that watchify provides.
You should not use uglify with watchify, i had lot of trouble using it together (terminal crash, ram eater) until i read that some minify tools are incompatible with it.
You dont need minify files for development, just use watchify for development, and browserify + uglify for production bundle.
Here are some scripts examples for npm to use browserify and watchify with babel:
"scripts" : {
"build": "browserify -t babelify -t uglifyify ./src/app.js -o ./dist/app.min.js",
"watch": "watchify -t babelify ./src/app.js -o ./dist/app.js --debug"
}
also dont forget your .babelrc file on the root of your project then install this:
npm i -S babel-runtime babel-preset-es2015 browserify watchify
I am trying to get to grips with browserify and ES6 simultaneously. I have the following basic Node files:
main.js
var foo = require('./foo.js');
var x = foo.math(200);
console.log(x);
foo.js
exports.math = (n)=>{
return n * 111;
};
Now I want to do the following:
Browserify this into a file bundle.js so I can include it as a script in my website
Compile the JS using babel to make the ES6 readable by all browsers
Minify bundle.js to improve load times in the browser
I have browserify installed globally and I run that with this command:
browserify main.js > bundle.js
Works great. But should I be running babel first? How do I complete my 3 step process and in what order (of course minification will have to happen last)? Should I be doing this all with grunt?
It shouldn't be necessary anymore to use a task runner. However, use a neat plugin like babelify from command line as described in its README.md here.
npm install --save-dev browserify babelify babel-preset-es2015
browserify script.js -o bundle.js \
-t [ babelify --presets es2015 ]
And add other transforms as needed from here or any where else, e.g. uglify.
For es6 use uglify-es, it supports ES6.
npm install uglify-es -g
Uglify ES has not been updated in a year and is not maintained and will probably not work. I suggest using Terser with a plugin like uglifyify run the following to install uglifyify
npm i uglifyify
as of 2018 babelify needs #babel/core (babel 7) and a preset like #babel/preset-env
Install them like this:
npm i babelify #babel/core #babel/preset-env
Finally
browserify \
-t [ babelify --presets [[ #babel/preset-env]] \
-g uglifyify main.js > bundle.js