nodejs下babel编译es6后异常定位助手:source-map-support

最新推荐文章于 2024-05-10 09:51:00 发布

weixin_34232617

最新推荐文章于 2024-05-10 09:51:00 发布

阅读量2.1k

点赞数

原文链接：https://my.oschina.net/cxz001/blog/652499

版权

为什么80%的码农都做不了架构师？>>>

使用es6甚至es7写代码是愉快的，然而由于兼容性原因，我们不得不使用babel把es6代码转成es5的，但这样会有一个问题，那就是出现错误的时候错误栈根据编译后代码而不是es6代码中的位置，这就给定位问题带来一定的麻烦。

浏览器是支持source maps的，babel也提供了编译生成source maps功能，但node不是浏览器，原生不支持source maps，但是我们可以通过第三方包来实现这个功能。

这里就找到了一个叫做 source-map-support 的包，只需要在es6的脚本顶部加上：

require('source-map-support').install();

然后babel编译的时候加上 -s 参数生成source maps即可，尝试一下抛出异常，会发现 error stack中的文件位置成功被替换成了es6源代码中的位置。

-完-

转载于:https://my.oschina.net/cxz001/blog/652499

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34232617

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nodejs下babel编译es6后异常定位助手:source-map-support

为什么80%的码农都做不了架构师？>>> ...
复制链接

扫一扫

【异常】Node.js版本不支持在 ESM 顶层作用域中使用await，提示报错SyntaxError: Unexpected reserved word

本本本添哥

06-12

（2）package.json中的type字段可能被设置为"module"，这告诉 Node.js 使用 ESM 而不是 CommonJS。虽然较新版本的 Node.js（如 Node.js 14+）支持顶层await，但可能项目配置或者 Node.js 的实际版本不支持。确保你正在使用支持顶层await的 Node.js 版本（至少 Node.js 14.8.0）然而，错误信息显示await是在一个模块顶层作用域中使用的，这通常是不允许的。在 Node.js 中，await只能在async函数内部使用。

.map文件源映射(Source Map)详解

奇士的博客

12-02

4079

一、什么是源映射为了提高性能，很多站点都会先压缩 JavaScript 代码然后上线，但如果代码运行时出现错误，浏览器只会显示在已压缩的代码中的位置，很难确定真正的源码错误位置。这时源映射就登场了。源映射(Source Map)是一种数据格式，它存储了源代码和生成代码之间的位置映射关系。源映射一般使用 .map 扩展名，源映射本质是一个 JSON 文本文档，其MIME 类型也一般设为 application/json。二、如何使用源映射在 JavaScript 代码中添加注.

参与评论您还未登录，请先登录后发表或查看评论

探秘Source Map Support：让你的JavaScript调试更上一层楼

最新发布

gitblog_00054的博客

05-10

947

探秘Source Map Support：让你的JavaScript调试更上一层楼项目地址:https://gitcode.com/evanw/node-source-map-support 在这个JavaScript世界中，Source Map Support是一个不可或缺的工具，它为你的代码栈跟踪带来了源码级别的精度。无论你是使用TypeScript、CoffeeScript还是其他编译到J...

node-source-map-support:将源映射支持添加到node.js（用于堆栈跟踪）

05-23

源地图支持该模块通过为节点中的提供源映射支持。它使用模块将源映射文件的路径和行号替换为其原始路径和行号。输出模仿节点的堆栈跟踪格式，目的是使每种JS编译语言都更像一等公民。源映射完全是通用的（不特定于任何一种语言），因此您可以在同一节点进程中使用具有多种可编译为JS语言的源映射。安装及使用节点支持 $ npm install source-map-support 可以使用诸如库来生成。获得有效的源映射后，将源映射注释放在文件中的某个位置（通常自动完成或由编译器选择）： //# sourceMappingURL=path/to/source.map 如果一个文件中存在多个sourceMappingURL注释，则将遵循最后一个sourceMappingURL注释（例如，如果文件在代码中提及该注释，或者经历了多个编译器）。该路径应该是绝对路径，也可以是相对于编译文件的路径

运行vite项目报错：await import(‘source-map-support‘).then((r) =＞ r.default.install())

to_the_Future的博客

10-07

3366

项目实现屏幕截图功能。

babel-plugin-console-source：将文件名和行号添加到所有控制台日志中

01-31

Babel插件控制台源根据源文件，为每个控制台命令添加文件名和行号。 // app.js class App ( ) { constructor ( ) { console . log ( 'test' ) } } ↓ ↓ ↓ ↓ ↓ ↓ class App ( ) { constructor ( ) { console . log ( 'app.js (3:8)' , 'test' ) } } // test.js class Test ( ) { constructor ( ) { console . log ( 'test two' ) } } ↓ ↓ ↓ ↓ ↓ ↓ class Test ( ) { constructor ( ) { console . log ( 'test.js (3:8)' , 'test two' ) } } 用法 $ yarn add babel-plugin-console-source -D .babelrc {

mongo-nodejs-es6：MongoDB，Nodejs，ES6-CRUD API

02-04

在这个项目中，`mongo-nodejs-es6-master`目录下的代码实现了以下功能： 1. **连接MongoDB**：使用Mongoose库建立与MongoDB的连接，配置数据库连接参数。 2. **定义Schema**：通过Mongoose定义数据模型（Schema），...

让nodeJS支持ES6的词法----babel的安装和使用方法

10-19

主要介绍了让nodeJS支持ES6的词法----babel的安装和使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

node-es6:NodeJS + ES6样板版2018

04-29

**NodeJS + ES6样板版2018** 在现代Web开发中，JavaScript的ES6（ECMAScript 2015）版本引入了大量的新特性，显著提升了代码的可读性和可维护性。Node.js，作为JavaScript在服务器端运行的平台，也逐渐支持了ES6...

nodejs提示：cross-device link not permitted, rename错误的解决方法

10-16

主要给大家介绍了关于nodejs提示：cross-device link not permitted, rename错误的解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用nodejs具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

gulp-es6-seed:gulp-es6种子

05-22

gulp-es6种子使用NodeJS将Gulp-es6种子与可移植ES6-> ES5文件夹结构： gulp-es6—seed/-----es5/-----es6/--------test----gulpfile.js----package.json----README.mdNPM依赖项： gulp-babel gulp-sourcemaps源地图...

source-map-support:npm 包 source-map-support 的包装器

07-16

流星的源映射支持应用程序接口 SourceMapSupport . install ( ) ; 有关更多选项，请参阅。

babel-plugin-source-map-support：Babel插件，可自动使堆栈跟踪源图知道

01-31

名称 babel-plugin-source-map-support-Babel插件，可自动使堆栈跟踪源图知道安装 $ npm install source-map-support --save $ npm install babel-plugin-source-map-support --save-dev 概要 $ cat test.js import foo from 'foo' ; import bar from 'bar' ; foo ( bar ) ; $ babel --plugins source-map-support test.js import 'source-map-support/register' ; import foo from 'foo' ; import bar from 'bar' ; foo ( bar ) ; 描述这是一个，它将以下语句添加到源文件中： import 'source-map-support/register' ; 该语句与必须单独安装的模块结合使用，可挂接到v8堆栈跟踪API中，以将已转换代码中的调用站点转换回原始代

vue3+vite的项目报错 await import(‘source-map-support‘).then((r) =＞ r.default.install()) ^^^^^Synta

肖肖肖丽珠的博客

04-24

2942

执行nvm list查看电脑已经安装的node版本。然后nvm use v16.17.0。我的电脑安装了nvm可以查看目前已有的node版本。不会安装nvm的参考这个。报错原因是node版本的问题。要使用16之上的版本。查看一下node版本。

vite打包报错：await import(‘source-map-support‘).then((r) =＞ r.default.install())(亲测有效)

qq_45651984的博客

10-25

8172

vite打包报错：await import('source-map-support').then((r) => r.default.install())(亲测有效)

ts 打开sourcemap_调试篇 – Source Map - Node.js 调试指南

weixin_34061200的博客

01-14

2010

4.1.1 什么是 Source Map？对于 Source Map，想必大家并不陌生，在前端开发中通常要压缩 JavaScript，CSS，以减小体积，加快网页显示。但带来的后果是如果出现错误，就会导致无法定位错误，这时 Source Map 应运而生。举个例子， jQuery 1.9 引入了 Source Map，打开 http://ajax.googleapis.com/ajax/libs/...

webpack详细笔记

weixin_39814577的博客

12-14

1055

目录 1.npm命令 2.package.json 3.webpack配置文件 4.source map 5.自动编译 6.模块热更新 7.tree shaking(移除未引用代码) 8.生产环境构建 9.代码分离 10.懒加载 11.缓存 12.创建library 13.shimming 14.babel 15.service workers 16.typescript 17.其他 1.npm命令 npm -v：查看npm版本 npm install：从package.json中安装依赖 npm ins

Node.js 中 source map 使用问题总结

weixin_33857679的博客

04-10

2157

起源 Node 应用功能越来越复杂，很多业务都开始尝试使用 TypeScript 来开发。现在前端写的 JS 大部分是经过编译过程的，浏览器中通过 source map 的使用，可以很好的解决源码和编译运行时代码差异的问题。那么，在 Node 服务器环境应该如何使用 source map 呢？最近在重新搭建一个完全基于 ts 的 Node 应用，所有的...

前端架构设计第四课 Babel构建公共库实战

fegus的博客

05-19

907

07 梳理混乱的 Babel，不再被编译报错困扰今天我和你分享的话题和 Babel 相关。Babel 在前端中占有举足轻重的历史地位，几乎所有的大型前端应用项目都离不开 Babel 的支持。同时，Babel 不仅仅是一个工具，更是一个工具链（toolchain），是前端基建中绝对重要的一环。对于很多前端工程师来说，你可能配置过 Babel，也可能看过一些关于 Babel 插件或原理的文章。但我认为，“配置工程师”只是我们的起点，通过阅读几篇 Babel 插件编写的文章并不能让我们真正掌握 Babel

F:\nodejs\\node.exe: --openssl-legacy-provider is not allowed in NODE_OPTIONS

08-30

根据您提供的引用内容，问题中的错误信息"F:\nodejs\\node.exe: --openssl-legacy-provider is not allowed in NODE_OPTIONS"是由于在环境变量NODE_OPTIONS中设置了--openssl-legacy-provider参数引起的。请注意，这个参数不被允许在NODE_OPTIONS中使用。为了解决这个问题，您需要将环境变量NODE_OPTIONS中的--openssl-legacy-provider参数删除或注释掉。这样，您的软件应该就能正常打开了。如果您不知道如何编辑环境变量，可以按照以下步骤进行操作： 1. 在Windows操作系统中，右键点击"此电脑"（或"我的电脑"），选择"属性"。 2. 在打开的窗口中，点击"高级系统设置"。 3. 在系统属性窗口中，点击"环境变量"按钮。 4. 在"用户变量"或"系统变量"部分，找到名为NODE_OPTIONS的变量，并点击"编辑"按钮。 5. 在编辑变量窗口中，删除或注释掉--openssl-legacy-provider参数。 6. 点击"确定"，关闭所有打开的窗口。完成以上步骤后，您的环境变量将不再包含--openssl-legacy-provider参数，这应该解决了您软件无法打开的问题。请注意，修改环境变量可能需要重新启动您的计算机才能生效。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [HbuilderX运行打包项目时报node.exe: --openssl-legacy-provider is not allowed in NODE_OPTIONS的解决...](https://blog.csdn.net/zhu_liu_kun/article/details/130840556)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [npm info: node: --openssl-legacy-provider is not allowed in NODE_OPTIONS](https://blog.csdn.net/cptwjtptp/article/details/128895605)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]