@ 浏览验证/ 取消
A 类 浏览器 转换可修改您的代码 使用 坐标。 。 。 .
安装
npm install @browserify/uglifyify
动机/使用
通常你这样做是好的:
browserify index.js | terser -c > bundle.js
但uglify通过单独处理文件可以产生更小的输出 而不是整个包。 当使用丑化时,一般应该 (单位:千美元) 使用 Uglify,实现最小输出. 丑化提供 用于 Uglify 时的额外优化,但不提供全部 优化使用Uglify本身可以,所以它不是一个替换.
Uglify 使您能够将 Uglify 的 “ squeeze” 变换 应用到每个 文件 在此之前 它包含在捆绑中,意味着你可以去除已死代码 有条件路径需要。 以下是一个精心构思的例子:
if (true) {
module.exports = require('./browser')
} else {
module.exports = require('./node')
}
module.exports = require('./node') 会被Uglify排除,意思是
仅限 ./browser 将被捆绑并需要.
如果你把丑化和 输入,你吗 可以让这个更方便 使用此代码 :
if (process.env.NODE_ENV === 'development') {
module.exports = require('./development')
} else {
module.exports = require('./production')
}
用这个来编译:
NODE_ENV=development browserify -t envify -t @browserify/uglifyify index.js -o dev.js &&
NODE_ENV=production browserify -t envify -t @browserify/uglifyify index.js -o prod.js
不应该说,你应该 犹豫利用环境
浏览模块中的变量 - 这最适合您自己的
用浏览器构建的应用程序或模块 --standalone 标签.
文件扩展名
有时,你不希望丑化 将你的所有文件,例如,
如果你正在使用一个转换到 require CSS 或 HTML, 您可能会出错
如丑化所期望的JavaScript,如果无法解析它给出的会抛出.
使用 -x 或者说 --exts 转换选项,例如从
命令行 :
browserify \
-t coffeeify \
-t [ @browserify/uglifyify -x .js -x .coffee ]
上面的例子只会变小 .js 财务报告和审定财务报表 .coffee 文档,忽略其他文件.
全球变革
你也许也想利用丑化的预分解 要在整个浏览器中生成更精简的文件。 以 默认, 转换只更改您的应用程序代码, 但您可以使用全局 变换成模块代码 从您的终端:
browserify -g @browserify/uglifyify ./index.js > bundle.js
或者程序上说:
var browserify = require('browserify')
var fs = require('fs')
var bundler = browserify(__dirname + '/index.js')
bundler.transform('@browserify/uglifyify', { global: true })
bundler.bundle()
.pipe(fs.createWriteStream(__dirname + '/bundle.js'))
注意,这是罚款 丑化,因为它不应该改变的行为 您的代码出乎意料, 但是像刻录这样的变换 几乎总是 保持本地状态, 否则您会在模块中遇到出乎意料的副作用 没想到会这样修改.
忽略文件
有时uglifyjs会在特定设置下打碎特定文件——这是
难得的,但确实发生了,为了解决这个问题,你可以使用 ignore
选项。 在一个或多个 Glob 模式下,您可以过滤出特定文件
这边:
browserify -g [ @browserify/uglifyify --ignore '**/node_modules/weakmap/*' ] ./index.js
var bundler = browserify('index.js')
bundler.transform('@browserify/uglifyify', {
global: true,
ignore: [
'**/node_modules/weakmap/*'
, '**/node_modules/async/*'
]
})
bundler.bundle().pipe(process.stdout)
来源地图
Uglify 支持源地图, 这样您就可以将您的代码最小化, 并且仍然看到 原始来源 – 使用诸如 驱魔师 创建生产时 建设.
当:
- 你正在使用另一个转变,例如 咖啡调制,该内含源地图.
- 你通过了
--debug旗帜(或debug选项)到浏览器 捆绑.
启用 --debug 使用浏览器很容易:
browserify -t @browserify/uglifyify --debug index.js
var bundler = browserify({ debug: true })
bundler
.add('index.js')
.transform('@browserify/uglifyify')
.bundle()
.pipe(process.stdout)
如果你愿意不把它们包含进去, 你可以选择退出
使用 sourcemap 选项 :
browserify -t [ @browserify/uglifyify --no-sourcemap ] app.js
var bundler = browserify('index.js')
bundler.transform('@browserify/uglifyify', { sourceMap: false })
.bundle()
.pipe(process.stdout)