微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Babel传递字符串到es2015

如何解决Babel传递字符串到es2015

当我使用带有以下代码的babeljs repl时,得到的输出与在节点项目中使用时得到的输出不同。

这是我正在测试的代码

function test(list) {
  return [...list];
}

test();

和babeljs repl输出

"use strict";

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterabletoArray(arr) || _unsupportedIterabletoArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable,non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterabletoArray(o,minLen) { if (!o) return; if (typeof o === "string") return _arrayLiketoArray(o,minLen); var n = Object.prototype.toString.call(o).slice(8,-1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLiketoArray(o,minLen); }

function _iterabletoArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLiketoArray(arr); }

function _arrayLiketoArray(arr,len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0,arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function test(list) {
  return _toConsumableArray(list);
}

test();

但是当我从项目中使用它时

const babel = require("@babel/core");

const code = `
    function test(list) {
        return [...list];
    }

    test();
`;

babel.transform(
    code,{
        babelrc: true,filename: ".babelrc"
    },(err,result) => {
        console.log(result.code);
    }
);

我得到这个输出

var _toConsumableArray = require("D:/Work/Projects/new-setup/node_modules/@babel/runtime/helpers/toConsu
mableArray");                                                                                                                               
                                                                                                                                            
function test(list) {                                                                                                                       
  return _toConsumableArray(list);                                                                                                          
}                                                                                                                                           
                                                                                                                                            
test();                                                                                                                                     

.babelrc文件

{
    "presets": [
        [
            "@babel/preset-env",{
                "corejs": 3,"useBuiltIns": "entry"
            }
        ]
    ]
}

我如何获得与babeljs repl上的输出相同的输出

解决方法

无论您在babeljs repl输出中看到什么,都是babel运行时助手。这些帮助程序是基于您与预设环境一起使用的目标浏览器生成的。

因此,如果在babel预设中使用

#################################### Server ####################################
[server]
# Protocol (http,https,h2,socket)
;protocol = http

# The ip address to bind to,empty will bind to all interfaces
;http_addr =

# The http port  to use
;http_port = 3000

# The public facing domain name used to access grafana from a browser
;domain = example.com

# Redirect to correct domain if host header does not match domain
# Prevents DNS rebinding attacks
;enforce_domain = false

# The full public facing url you use in browser,used for redirects and emails
# If you use reverse proxy and sub path specify full url (with sub path)
;root_url = %(protocol)s://%(domain)s:%(http_port)s/grafana/

# Serve Grafana from subpath specified in `root_url` setting. By default it is set to `false` for compatibility reasons.
;serve_from_sub_path = true

# Log web requests
;router_logging = false

# the path relative working path
;static_root_path = public

# enable gzip
;enable_gzip = false

# https certs  key file
;cert_file =
;cert_key =

# Unix socket path
;socket =

它将为您提供上面粘贴的确切输出。

但是如果我将目标更改为

{
    "presets": [
        [
            "@babel/preset-env",{
                "corejs": 3,"useBuiltIns": "entry","targets": "defaults"
            }
        ]
    ]
}

这将为我提供更清晰的输出,因为它现在不支持IE11。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。