调试WebPACK,ES6和Babel

ZenMaster提出了一个问题:Debugging with webpack, ES6 and Babel,或许与您遇到的问题类似。

回答者Jamie Treworgy给出了该问题的处理方式:

This is an issue with Javascript source maps, which don't currently support mapping symbol names, and babel, which changes the names of import-ed modules when compiling to CommonJS from ES2105 module syntax.

Babel does this to fully support the fact that ES2015 modules export bindings by resolving all references to imports whenever they are used in code, instead of at import time.

If you aren't writing modules that depend on exporting bindings (as is likely, since you couldn't actually do this with CommonJS), then you may prefer to preserve variable names when transpiling ES2015. I created an alternative to the native babel commonjs module transform for Babel 6 that preserves variable names: babel-plugin-transform-es2015-modules-commonjs-simple. This is a drop-in replacement for babel-plugin-transform-es2015-modules-commonjs, the native babel transform.

You can use this with webpack or node. A typical config might be:

npm install --save-dev babel-preset-es2015-webpack
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs-simple

The module babel-preset-es2015-webpack is a fork of the standard es2015 preset that does not include the module transform, because you want to use the alternate version. This works for node also. These modules are used in .babelrc:

{
    "presets": [
        "es2015-webpack"
    ],
    "plugins": [
        "transform-runtime",
        ["transform-es2015-modules-commonjs-simple", {
            "noMangle": true
        }]
    ]
}

transform-runtime is usually a good idea to include in any substantive project to avoid extra repetition of generated code. Typical module config in webpack.config.js:

module: {
    loaders: [
        {
            loader: "babel-loader",
            include: [path.resolve(__dirname, "src")]                
        }
    ]
},
devtool: '#inline-source-map'

The resulting code won't change the names of imports, so debugging with source maps will provide you with access to symbols.

希望本文对你有帮助,欢迎支持JavaScript中文网

原文链接:stackoverflow.com

上一篇:在iPad上调试javascript
下一篇:我如何和为什么编写一个扩展null的类?

相关推荐

  • 领略原生 javascript es6~es10 的魅力

    作为前端开发工程师,盲目追逐框架似乎有点舍本逐末,要知道基本功才是硬核。JavaScript 的语法这几年一直在更新,不管我们是框架的核心开发者还是业务重塑者,学习下最新的 JavaScript 语...

    1 年前
  • 领略原生 JavaScript ES6~ES10 的魅力

    作为前端开发工程师,盲目追逐框架似乎有点舍本逐末,要知道基本功才是硬核。JavaScript 的语法这几年一直在更新,不管我们是框架的核心开发者还是业务重塑者,学习下最新的 JavaScript 语...

    1 年前
  • 面试题:没有es6老项目,如何用jq解决异步的问题?

    我们都知道es6提供了promise异步写法,但是大部分的公司都是jq写的,那我们如何用Jq来写和promise异步一样的写法呢?这个知道的人不多下面我们就来写写把 注意: 1 JQ 1.5以上 2 ...

    2 年前
  • 面试题3:ES5、ES6两种方式实现继承

    写一个类Person,拥有属性age和name,拥有方法say(something)再写一个类Superman,继承Person,拥有自己的属性power,拥有自己的方法fly(height) /...

    5 个月前
  • 面试深入一、ES6模块化、安装和打包

    开发环境已经普及使用 浏览器环境却支持不好(需要开发环境编译) 内容很多,重点了解常用语法 面试:开发环境的使用 + 重点语法的掌握 问题 ES6模块化如何使用,开发环境如何打包 Clas...

    2 年前
  • 需要ES6中的Iterator迭代器?

    本文原文链接专门说一说Iterator迭代器的原因是,为后面async/await应用原理的文章做铺垫,因为async/await是由Generator+Promise共同构成,而其中的Generat...

    4 个月前
  • 阮一峰ES6全面回顾

    9月抽空重新回顾了下ES6所有知识点,整个回顾过程既惊喜又感慨,感慨开发这么久好像真的没有好好的静下心去读一本好的书,大多情况下只是在使用的时候用到了,不熟悉或者感兴趣再去走马观花一通,感慨之余也发...

    1 年前
  • 通过选择进口ES6模块

    通过选择进口ES6模块 ...

    3 年前
  • 通过 20 个棘手的ES6面试问题来提高咱们的 JS 技能

    作者:Alex 译者:前端小智 来源:dev.to 今天最后一天了,上个月自己花了 1300 买了阿(a)里(li)的 服 务 器来学习 node 及对应的框架,在 11 号之前它们有做活动,1...

    1 年前
  • 通俗易懂理解ES6 - 变量的解构赋值

    引言 万丈高楼平地起,欲练此功,必先打好基本功: ) 编程语言总少不了变量赋值;ES6中引入了新的赋值形式:__解构赋值__;解构赋值大大的简化了变量赋值的代码,解构赋值仅能对具有迭代器(Iterat...

    1 年前

官方社区

扫码加入 JavaScript 社区