如何浏览器化、编译 ES6 和缩小 NodeJS 应用程序
How to browserify, compile ES6 and minify NodeJS application
我正在尝试同时掌握 browserify 和 ES6。我有以下基本节点文件:
main.js
var foo = require('./foo.js');
var x = foo.math(200);
console.log(x);
foo.js
exports.math = (n)=>{
return n * 111;
};
现在我想做以下事情:
- 浏览器将其保存到一个文件中
bundle.js
这样我就可以将它作为脚本包含在我的网站中
- 使用 babel 编译 JS,使 ES6 可被所有浏览器读取
- 缩小
bundle.js
以缩短浏览器中的加载时间
我在全球范围内安装了 browserify,我 运行 使用此命令:
browserify main.js > bundle.js
效果很好。但是我应该先 运行ning babel 吗?我如何完成我的 3 步过程以及按什么顺序(当然缩小必须最后发生)?我应该用 g运行t 来做这一切吗?
不再需要使用任务运行程序。但是,按照其 README.md
here.
中所述,从命令行使用像 babelify
这样的简洁插件
npm install --save-dev browserify babelify babel-preset-es2015
browserify script.js -o bundle.js \
-t [ babelify --presets es2015 ]
并根据需要从 here 或其他任何地方添加其他转换,例如uglify
.
for es6 use uglify-es, 支持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 运行下面要安装uglifyify
npm i uglifyify
截至 2018 年,babelify 需要 @babel/core(babel 7)和 @babel/preset-env
这样的预设
像这样安装它们:
npm i babelify @babel/core @babel/preset-env
终于
browserify \
-t [ babelify --presets [[ @babel/preset-env]] \
-g uglifyify main.js > bundle.js
我正在尝试同时掌握 browserify 和 ES6。我有以下基本节点文件:
main.js
var foo = require('./foo.js');
var x = foo.math(200);
console.log(x);
foo.js
exports.math = (n)=>{
return n * 111;
};
现在我想做以下事情:
- 浏览器将其保存到一个文件中
bundle.js
这样我就可以将它作为脚本包含在我的网站中 - 使用 babel 编译 JS,使 ES6 可被所有浏览器读取
- 缩小
bundle.js
以缩短浏览器中的加载时间
我在全球范围内安装了 browserify,我 运行 使用此命令:
browserify main.js > bundle.js
效果很好。但是我应该先 运行ning babel 吗?我如何完成我的 3 步过程以及按什么顺序(当然缩小必须最后发生)?我应该用 g运行t 来做这一切吗?
不再需要使用任务运行程序。但是,按照其 README.md
here.
babelify
这样的简洁插件
npm install --save-dev browserify babelify babel-preset-es2015
browserify script.js -o bundle.js \
-t [ babelify --presets es2015 ]
并根据需要从 here 或其他任何地方添加其他转换,例如uglify
.
for es6 use uglify-es, 支持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 运行下面要安装uglifyify
npm i uglifyify
截至 2018 年,babelify 需要 @babel/core(babel 7)和 @babel/preset-env
这样的预设像这样安装它们:
npm i babelify @babel/core @babel/preset-env
终于
browserify \
-t [ babelify --presets [[ @babel/preset-env]] \
-g uglifyify main.js > bundle.js