V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
zzz6519003
V2EX  ›  JavaScript

js 不用 build 和不用打包是一个意思吗?我理解的 build 就是把 js 压缩成乱码一般~

  •  
  •   zzz6519003 · 2023-10-15 11:16:43 +08:00 · 1967 次点击
    这是一个创建于 409 天前的主题,其中的信息可能已经有所发展或是发生改变。
    11 条回复    2023-10-16 16:57:03 +08:00
    Xbathy
        1
    Xbathy  
       2023-10-15 11:29:07 +08:00
    build 也有可能是把 ts 编译成 js
    totoro52
        2
    totoro52  
       2023-10-15 11:34:15 +08:00
    不打包 那个 JS 体积几十 M , 根本没法线上用
    Kirscheis
        3
    Kirscheis  
       2023-10-15 11:40:47 +08:00   ❤️ 1
    > "js 不用 build 和不用打包是一个意思吗?"

    打包不是一个通用的说法,所以可以是一个意思,取决于上下文

    > "我理解的 build 就是把 js 压缩成乱码一般~"

    不是一个过程,js 里 Build 主要做几件事:

    1. 按 ui 描述语言生成代码
    2. 把多文件合并成一个
    3. 把高级格式和语法糖转变成各个引擎的原生 js
    4. 混淆,也就是你说的变成乱码
    5. 压缩
    flyqie
        4
    flyqie  
       2023-10-15 11:40:59 +08:00 via Android
    build 比 pack 来说应该是步骤多的。

    ts 转 js 好像很少有人会说叫 pack 。。
    XCFOX
        5
    XCFOX  
       2023-10-15 12:44:58 +08:00   ❤️ 2
    我理解 build 是把源代码编译成可直接运行的代码,比如把 ts 编译成 js ,把 ESNext 编译成 ES5 ,把 js 编译成字节码。
    常用的工具有:
    https://github.com/microsoft/TypeScript
    https://github.com/babel/babel
    https://github.com/swc-project/swc
    https://github.com/bytenode/bytenode

    打包(bundle | pack)根据不同的项目类型有不同的操作。

    对于通用模块项目(npm package),打包需要将源代码编译成 esm 模块以及 cjs 模块,有时还需要输出 .d.ts 类型声明文件。
    常用的工具有:
    https://github.com/rollup/rollup
    https://github.com/evanw/esbuild
    https://github.com/unjs/unbuild
    https://github.com/egoist/tsup
    https://github.com/developit/microbundle

    对于应用项目(app),打包需要将源代码以及依赖资源(cs, json, 图片, 甚至 node 本身) 构建成静态文件或者可执行文件,目的是减少 app 体积、方便部署。
    常用的工具有:
    https://github.com/evanw/esbuild
    https://github.com/vitejs/vite
    https://github.com/webpack/webpack
    https://github.com/web-infra-dev/rspack
    https://github.com/nexe/nexe
    https://github.com/vercel/pkg
    learningman
        6
    learningman  
       2023-10-15 13:04:58 +08:00
    build 指的是 transpile 和 bundle ,minify 是个可选选项,但是为啥不开呢?
    janus77
        7
    janus77  
       2023-10-15 17:31:25 +08:00 via Android
    有时候前端项目写的不是标准 js ,有可能是 dsl 或者是魔改了的 js ,甚至不是 js 而是其他语言,而 js 又是解释型,所以要尽量变成标准和缩小体积、剔除一些东西
    另外如果加上了一些运行时,要做成运行时能识别的格式,也不是标准 js ,这也需要 build 这部分工作
    libook
        8
    libook  
       2023-10-16 11:17:33 +08:00
    build 就是对代码进行处理,包括编译、压缩、合并、打包等步骤,所以 build 可以包含打包,但打包不完全等于 build 。
    zzz6519003
        9
    zzz6519003  
    OP
       2023-10-16 15:57:35 +08:00
    @libook 你是画漫画的李神吗 hhh
    libook
        10
    libook  
       2023-10-16 16:11:44 +08:00
    @zzz6519003 #9 啊?不是。
    你是说我的头像吗?是朋友给我画的。
    lete
        11
    lete  
       2023-10-16 16:57:03 +08:00   ❤️ 1
    > js 不用 build 和不用打包是一个意思吗?

    答: 是

    build 构建: 将某些东西转换成某些产物,如 java 项目 build 后 得到 jar 包,前端项目 build 将 ts 、第三方库和你的代码构建到一起形成一个新的 .js 文件。

    bundle 在构建过程中,将公共的代码单独提取出来

    > 我理解的 build 就是把 js 压缩成乱码一般~

    压缩:是将正常代码压缩使得 js 文件体积变小,删除空格、换行、冗余代码(通过代码格式化可以还原源码)

    丑化(乱码):也就是你所说的乱码,在压缩的基础上再次压缩,将变量名、函数名、代码结构拧成一团(通过代码格式化无法还原源码)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3536 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:55 · PVG 12:55 · LAX 20:55 · JFK 23:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.