首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Webpack 原理系列八:产物转译打包逻辑

之前的所有前置操作 「模块转译」:遍历 modules 数组,完成所有模块的转译操作,并将结果存储到 compilation.codeGenerationResults 对象 「模块合并打包」:在特定上下文框架下...可以看到,Webpack 先将 modules 逐一转译为模块产物 —— 「模块转译」,再将模块产物拼接成 bundle —— 「模块合并打包」,我们下面会按照这个逻辑分开讨论这两个过程的原理。...main.js 文件所示,包含三块内容,从上到下分别为: name.js 模块对应的转译产物,函数形态 Webpack 按需注入的运行时代码 index.js 模块对应的转译产物,IIFE(立即执行函数...,我们先回到这个流程图: 流程图中,compilation.codeGeneration 函数执行完毕 —— 也就是模块转译阶段完成后,模块的转译结果会一一保存到 compilation.codeGenerationResults...一个极度简化的 CMD 实现:__webpack_require__ 函数 最后,一个包裹了 entry 代码的 IIFE 函数 「模块转译」 是将 module 转译为可以在宿主环境如浏览器上运行的代码形式

1.2K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【华为分享】前端领域的转译打包工具链(下)

    这是前端领域的转译打包工具链的第二篇文章,上篇文章讲了前端领域的各种转译器,包括 babel、tsc、terser、eslint、postcss、posthtml、swc 等,介绍了他们各自的用途和通用的原理...它们通过匹配文件路径的方式来对不同文件应用不同的转译器。 比如 gulp: ? 和 fis: ?...解释器和转译器的区别 转译器是把源码 parse 成 AST 之后,进行 AST 转换,之后再打印成目标代码,并生成 sourcemap。 ?...我们总结下这两节的内容: 因为前端 html、css、js 直接从源码解释的特点,所以需要转译器,不同转译器(babel、tsc、terser、eslint、postcss、posthtml、swc)目的不同...转译器用在项目里需要配合打包工具,或者通过 ide 插件、git hooks 的方式使用。 转译器大多是对单个文件进行处理,打包工具用于整个项目的处理。

    77110

    babel实践:真实gulp项目支持ES6转译ES5的跳坑指北

    ;新增 plugin 配置,所有的东西都插件化,什么代码要转译都能在插件中自由配置;新增 preset 配置,babel5会默认转译ES6和jsx语法,babel6转译的语法都要在perset中配置,preset...因为babel默认只转译新的JavaScript句法,而不会转译新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象...,选false则会转译成ES模块规范,这里也被坑过,比如我开始没选,转译默认选择的commonjs的模块规范,结果浏览器打印报require not defined错误,也是坑了好久才找到这么个犄角旮旯的知识点...babel中的插件,通过配置不同的插件才能告诉babel,我们的代码中有哪些是需要转译的,比如转译箭头函数、class语法、for-of等等,可以对单一转译需求进行个性化定制,从而减少最后打包时文件体积...当然,我是不喜欢这样做的,一般WEB开发也不会需要用到这么极端,推荐babel+babel-polyfill一口气把所有能转译的ES6全支持。

    1.9K20

    ES5 在 Web 上的现状

    如果查看下面的数据,了解今天流行的网站实际上是如何转译和部署他们的代码到生产环境,你会发现大多数网站在互联网上发布的代码是转译为 ES5 的,但仍然无法在 IE 11 中工作——这意味着转译器和 polyfill...esbuild 否 esbuild默认不进行转译。你可以设置自定义目标以启用转译,但 ES5 不支持作为转译目标。...这很值得注意,因为正如我之前提到的,大多数使用 Babel 转译源文件的开发者在打包时,明确配置他们的打包器不转译node_modules目录中的任何内容——这是库作者历史上觉得需要继续转译为 ES5...而 TypeScript(tsc),作为仅次于 Babel 的第二大转译工具,只会转译项目自己的代码文件。它不会转译node_modules中的项目依赖项。...建议 对于库作者 库作者应将代码转译为 ES5 的最初理由是大多数网站需要转译为 ES5。然而,鉴于目前前 10,000 个网站中有 89%发布了一些未转译的 ES6+语法,这一理由已不再有效。

    11610

    CodeSandbox 如何工作? 上篇

    因为WebpackDllPlugin是在运行或转译之前预先对依赖的进行转译,所以在项目代码转译阶段可以忽略掉这部分依赖代码,这样可以提高构建的速度(真实场景对npm依赖进行Dll打包提速效果并不大):...比如在转译入口文件时,发现 react 这个模块没有在本地缓存模块队列中,这时候就会到远程将它下载回来,然后接着转译。...转译阶段:真正开始转译了,首先重新转译上个阶段计算出来的需要更新的模块。接着从入口文件作为出发点,转译和构建新的依赖图。...这里不会重复转译没有变化的模块以及其子模块 TranspiledModule TranspiledModule用于管理某个具体的模块,这里面会维护转译和运行的结果、模块的依赖信息,并驱动模块的转译和执行..., 收集新的依赖; 当模块转译完成后,会递归转译依赖列表。

    6.6K134

    探索腾讯云语音:智能语音识别的行业应用与技术展望

    转译执行次数2,执行时间为:0.58秒request_id: 6663f35090233b8813d151b0asr转译执行次数3,执行时间为:0.44秒request_id: 6663f35109a73b88789a3cb0asr...转译执行次数10,执行时间为:0.35秒asr转译平均执行时间为: 0.480242919921875 秒2:30秒的语音,ENGINE_TYPE = "8k_zh",平均解析时间为2.61秒request_id...: 666265e429143b8848e4aeb0asr转译执行次数1,执行时间为:2.33秒request_id: 666265e7dd2d3b88ab88b1b0asr转译执行次数2,执行时间为...转译执行次数10,执行时间为:2.40秒asr转译平均执行时间为: 2.618130421638489 秒多语言支持考虑到跨国运输的需求,确保系统支持多语言识别,为不同国家和地区的驾驶员提供服务。..., 'start_time': 422500, 'end_time': 459757, 'speaker_id': 0}asr转译执行次数1,执行时间为:22.21秒asr转译平均执行时间为: 22.208552598953247

    27520
    领券