EN
Browserify - compile Node.js JavaScript / EcmaScript / ES6+ to browser JavaScript
9 points
In this article, we would like to show how to compile any Node.js JavaScript / EcmaScript code to browser JavaScript with Browserify (second section contains the minified version).
Quick solution:
xxxxxxxxxx1
npx browserify -t [ babelify --presets [ @babel/preset-env ] ] input.js -o output.jsor
xxxxxxxxxx1
npx browserify -t [ babelify --presets [ @babel/preset-env ] ] -g uglifyify input.js -o output.js
Project structure:
Example: src/index.js file:
xxxxxxxxxx1
const jsdom = require('jsdom');2
3
module.exports = jsdom.JSDOM;
Creating project
xxxxxxxxxx1
npm init2
npm install --save jsdom3
npm install --save-dev browserify babelify @babel/core @babel/preset-envNote:
@babel/preset-envis a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms are needed by your target environment(s).
https://babeljs.io/docs/en/babel-preset-env.
Code compilation (run the following command):
xxxxxxxxxx1
npx browserify -t [ babelify --presets [ @babel/preset-env ] ] ./src/index.js -o build/bundle.jspackage.json file example:
xxxxxxxxxx1
{2
"name": "jsdom-bundle",3
"version": "1.0.0",4
"dependencies": {5
"jsdom": "^16.6.0"6
},7
"devDependencies": {8
"@babel/core": "^7.14.6",9
"@babel/preset-env": "^7.14.5",10
"babelify": "^10.0.0",11
"browserify": "^17.0.0"12
}13
}
Creating project
xxxxxxxxxx1
npm init2
npm install --save jsdom3
npm install --save-dev browserify babelify @babel/core @babel/preset-env uglifyify terserCode compilation (run the following command):
xxxxxxxxxx1
npx browserify -t [ babelify --presets [ @babel/preset-env ] ] -g uglifyify ./src/index.js -o build/bundle.jsNote: got to this article to know how to achieve better
*.jsfiles compression.
package.json file example:
xxxxxxxxxx1
{2
"name": "jsdom-bundle",3
"version": "1.0.0",4
"dependencies": {5
"jsdom": "^16.6.0"6
},7
"devDependencies": {8
"@babel/core": "^7.14.6",9
"@babel/preset-env": "^7.14.5",10
"babelify": "^10.0.0",11
"browserify": "^17.0.0",12
"terser": "^5.7.0",13
"uglifyify": "^5.0.2"14
}15
}
