- 综合排序
- 最热优先
- 最新优先
- 来自专栏编程技术分享
从 rollup 初版源码学习打包原理
正文 rollup 使用了 acorn 和 magic-string 两个库。为了更好的阅读 rollup 源码，必须对它们有所了解。 下面我将简单的介绍一下这两个库的作用。 magic-string magic-string 也是 rollup 作者写的一个关于字符串操作的库。 下面是 github 上的示例： var MagicString = require( 'magic-string' ); var s = new MagicString( 'problems = 99 还记得文章一开始提到的 magic-string 库吗？ 在 generate() 中，会将每个 AST 节点对应的源代码添加到 magic-string 实例中： magicString.addSource({ content: source,
1.6K41发布于 2020-09-28 - 来自专栏京程一灯
动手实现一个简易的webpack
安装基础插件 npm install --dev-save @babel/core @babel/preset-env @babel/traverse babylon magic-string package.json traverse').default const { transformFromAst } = require('@babel/core') // const MagicString = require('magic-string
53120发布于 2020-11-17 - 来自专栏源码揭秘
揭秘 Rollup Tree Shaking
magic-string 作用是可以对源代码进行轻微的修改和替换。 const MagicString = require('magic-string') const s = new MagicString(`export var name = 'careteen'` /module') const MagicString = require('magic-string') class Bundle { constructor(options) { this.entryPath /src/module.js const { parse } = require('acorn') const MagicString = require('magic-string') const analyse /src/module.js const { parse } = require('acorn') const MagicString = require('magic-string') const analyse
3.3K20编辑于 2022-02-14 - 来自专栏vue3源码
最近很火的Vue Vine是如何实现一个文件中写多个组件
将断点走进createVineFileCtx函数，在我们这个场景中简化后的createVineFileCtx函数代码如下： import MagicString from 'magic-string' fileMagicCode：是一个由magic-string库new的一个对象，对象中存了在编译时生成的js代码字符串。 magic-string是由svelte的作者写的一个库，用于处理字符串的JavaScript库。它可以让你在字符串中进行插入、删除、替换等操作，在编译时就是利用这个库生成编译后的js代码。
1.1K21编辑于 2024-07-12 - 来自专栏前端Q
站在潮流前沿，不到100行代码快速实现一个简易版 vite
simple-vite/vit/index.js const { init, parse } = require('es-module-lexer'); const MagicString = require('magic-string code; // 定义依赖映射的对象 const metaData = require(path.join(cacheDir, '_metadata.json')); // magic-string replacePath); }); return transformCode.toString(); }; 至此，对于 js 请求已处理完毕，其中主要用到的两个包 es-module-lexer 和 magic-string
1.1K20发布于 2021-07-01 - 来自专栏采云轩
Rollup 与 Webpack 的 Tree-shaking
// 生成 AST 语法树 "acorn-jsx": "^5.3.2", // 针对 jsx 语法分析 "acorn-walk": "^8.2.0", // 递归生成对象 "magic-string tiny, fast JavaScript parser, written completely in JavaScript.可查看(https://github.com/acornjs/acorn)，Magic-string
1.8K30编辑于 2022-12-01 - 来自专栏有意思的前端世界
Vite入门从手写一个乞丐版的Vite开始（上）
接下来我们检查当导入来源不是.或/开头的就转换为/@module/xxx的形式： // app.js const MagicString = require("magic-string"); app.use , typeAlias.js); res.statusCode = 200; res.end(s.toString()); } }); 修改js字符串我们使用了magic-string
96620编辑于 2022-09-28 - 来自专栏前端三元同学
经过一个月的探索，我如何将 AST 操作得跟呼吸一样自然
consola from '/node_modules/consola/src/index.js' （具体路径由 main 指定，对于 esm 模块则会由 module 指定） ，这一部分的逻辑里主要依赖了 magic-string 和 es-module-lexer 这两个库，通过 es-module-lexer 获取到导入语句的标识在整个文件内部的起始位置、结束位置，并通过 magic-string 将其替换为浏览器能够解析的相对导入
1.9K11发布于 2021-11-23 - 来自专栏前端时刻
点击页面元素,这个Vite插件帮我打开了Vue组件
return code }, } } // compiler.ts import path from "path" import MagicString from "magic-string
1.5K30编辑于 2022-04-19 - 来自专栏脑洞前端
为什么eslint没有 no-magic-string?
image.png Magic String 实际上一个第三方的 tslint 仓库的一个issue 明确指出了想要增加”no -magic-string” 的想法，只不过被仓库成员给否掉了，原因是其不够通用
1.9K10发布于 2020-05-07 - 来自专栏用户4456933的专栏
SourceMap 与前端异常监控
此时我们可以使用 magic-string 来实现。 const MagicString = require('magic-string'); const s = new MagicString('problems = 99'); s.overwrite sourcesContent: [ 'problems = 99' ], names: [], mappings: 'IAAA,MAAQ,GAAG' } 我们发现对于简单的字符串处理，magic-string
2.6K31发布于 2021-07-12 - 来自专栏vue3源码
为什么defineProps宏函数不需要从vue中import导入？
import MagicString from 'magic-string' class ScriptCompileContext { source = this.descriptor.source magic-string是由svelte的作者写的一个库，用于处理字符串的JavaScript库。它可以让你在字符串中进行插入、删除、替换等操作，并且能够生成准确的sourcemap。
54810编辑于 2024-04-24 - 来自专栏深度学习与python
我踩过了 TypeScript 的坑，只想告诉你快来
这里面复杂的情况可以用到 AST 工具，简单的则可以通过 magic-string 等 JavaScript 库写脚本来进行直接替换； 然后搭配上最新的 prettier、eslint、husky 等配置
46520编辑于 2023-03-29 - 来自专栏vue3源码
天天用defineEmits宏函数，竟然不知道编译后是vue2的选项式API？
下面这个是我简化后的ScriptCompileContext类的代码： import MagicString from 'magic-string' class ScriptCompileContext magic-string是一个用于高效操作字符串的 JavaScript 库。它提供丰富的 API，可以轻松地对字符串进行插入、删除、替换等操作。
32810编辑于 2024-04-24 - 来自专栏小豪成长日记
原来rollup这么简单之插件篇
规范解析器进行源码分析，获取依赖，递归此操作 -> 生成模块，挂载模块对应文件相关信息 -> 分析ast，构建各node实例 -> 生成chunks -> 调用各node重写的render -> 利用magic-string
51520编辑于 2023-10-22 - 来自专栏前端二次元
深入理解 Rollup 的插件机制--vite
1 replace({ __TEST__: 1 }) ]};内部实现也并不复杂，主要通过字符串替换来实现，核心逻辑简化如下:import MagicString from 'magic-string
1.3K70编辑于 2023-11-17 - 来自专栏vue3源码
有点东西，template可以直接使用setup语法糖中的变量原来是因为这个
magic-string是由svelte的作者写的一个库，用于处理字符串的JavaScript库。它可以让你在字符串中进行插入、删除、替换等操作，并且能够生成准确的sourcemap。
48220编辑于 2024-06-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号