Question

我在我的应用程序中使用es6模块，并且在我的chrome检查器中进行调试时遇到问题。当我在代码中执行以下操作时：

import 'widget' from './widget'

class SomeClass {
  componentDidMount(){
    debugger; // widget is not defined here according to chrome console!
    widget.doSomething();
  }
}

查看浏览器正在阅读的已编译源文件，我看到应用于原始js文件的babelify转换已重命名为＆＃39;小部件＆＃39;变成类似＆＃39; _widget_Js＆＃39;的东西。但是，我已经编译了JS以及源映射，因此chrome检查器显示了原始的JS文件，但是当我引用原始的“小部件”时，它并没有识别它。变量（它看到＆＃39; _widget_Js＆＃39;变量，但我当然不希望每次调试时都要查找已编译的翻译变量！）。

有关如何让chrome识别原始导入名称的任何建议？如果它有帮助，我可以提供有关我的设置的更多信息（gulp + browserify + babelify）。谢谢！

Answer 1

你真的无能为力。如果Chrome在源地图public class HelloWorld { static String[] month = new String[]{"1","2","3","4","5","6","7*","8","9*"}; public static boolean isSignificant() { boolean isFound = false; for(int i=0; i <month.length && isFound == false; i++) { if(month[i].endsWith("*")) { isFound = true; } } return isFound; } public static void main(String []args) { HelloWorld obj = new HelloWorld(); if(obj.isSignificant()) { System.out.println("The string ends with *"); } else { System.out.println("The string donot end with *"); } } }中实现了对映射的支持，那将有所帮助。

Answer 2

由于@JMM注意到源映射变量名称当前不起作用。 Babel必须更改导入的变量名称才能支持ES2015模块中的exported bindings。

我创建了一个名为babel-plugin-transform-es2015-modules-commonjs-simple的Babel 6插件，该插件将导入模块而不更改符号名称，但代价是打破＆＃34;绑定＆＃34; ES6模块的行为。由您来决定这种权衡是否值得。由于这个概念在CommonJS中甚至不存在，因此对我来说这很容易。

它是babel-plugin-transform-es2015-modules-commonjs的替代品：

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

.babelrc：

{
    plugins: [
        "transform-es2015-arrow-functions",
        "transform-es2015-template-literals",

...更多插件

        ["transform-es2015-modules-commonjs-simple", {
            noMangle: true
        }],
        "sourceMaps": true
    ]
}

如果您使用的是预设，那就有点棘手了，因为目前还没有明确的方式来覆盖预设中的插件，the repo上有说明。

您可以使用noMangle选项随时打开或关闭行为。该插件跟踪本地babel commonjs转换的版本和确实的大部分源代码。

es6 babelify更改变量名称，变量无法在检查员中找到

2 个答案: