如何浏览器化、编译 ES6 和缩小 NodeJS 应用程序

Question

我正在尝试同时掌握 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 来做这一切吗？

Answer 1

不再需要使用任务运行程序。但是，按照其 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.

Answer 2

for es6 use uglify-es, 支持ES6.

npm install uglify-es -g

Answer 3

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

如何浏览器化、编译 ES6 和缩小 NodeJS 应用程序

How to browserify, compile ES6 and minify NodeJS application

javascript

node.js

ecmascript-6

browserify

babeljs