使用babel-cli命令babel xx -d xx把一个js文件转成了ES5的,并在package.json里加了"babel-polyfill": "^6.23.0"依赖

转换前

import 'babel-polyfill';
(x => x * 2)(1);
var b = Array.of(1,2,4);

转换后

'use strict';

require('babel-polyfill');

(function (x) {
return x * 2;
})(1);
var b = Array.of(1, 2, 4);

一方面polyfill并没有在Array.of前面加上ES5的转换API,在浏览器打开也报错:require is not defined

为何,gulp-babel编译es6后的require怎么处理

Babel 的作用是帮助我们转换 ES6 代码为 ES5, 但是它没有模块管理的功能,浏览器端默认也无法识别 CommonJs 规范,

这就需要我们额外使用模块打包工具,为我们的代码做一些包裹,让它能在浏览器端使用。 比如 BrowserifyWebpack

关于babel和babel-polyfill的更多相关文章

  1. @babel/preset-env使用polyfill遇到的坑

    场景还原 最近将一个项目由babel@6升级到babel@7,升级后最重要的两个包: @babel/preset-env: 提供代码的转换和API的polyfill的能力 @babel/plugin- ...

  2. babel (三) babel polly-fill

    Babel includes a polyfill that includes a custom regenerator runtime and core-js. This will emulate ...

  3. 使用babel与@babel/node

    安装 yarn add -D @babel/cli @babel/node 编译entry-server.js yarn babel ./src/ssr/entry-server.js --prese ...

  4. babel如此简单

    凡是看到这个标题点进来的同学,相信对babel都有了一定的了解.babel使用起来很简单,简单到都没有必要写一篇文章去介绍,直接看看官方文档就可以.所以我也在怀疑到底该不该写这篇文章.想来想去还是决定 ...

  5. babel从入门到入门

    babel从入门到入门 来源 http://www.cnblogs.com/gg1234/p/7168750.html 博客讲解内容如下: 1.babel是什么 2.javascript制作规范 3. ...

  6. webpack+babel项目在IE下报Promise未定义错误引出的思考

    低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要poly ...

  7. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  8. 《前端之路》之 Babel 下一代 JavaScript 语法编译器

    写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...

  9. webpack4与babel配合使es6代码可运行于低版本浏览器

    使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的.那就借助babel7转换,再加上webpack打包,实现代码的转换. 转换包括两部分:语法和API let.const ...

  10. 关于babel官网的学习

    提起babel,前端er大概都不陌生.但是为什么要有babel呢?解决了什么问题?怎么使用babel呢?注意点在哪?以下就从这几个方面总结一下我关于babel学习的结果吧. 为什么要有babel呢? ...

随机推荐

  1. Web自动化测试 Selenium+Eclipse+Junit+TestNG+Python

    Selenium+Eclipse+Junit+TestNG+Python 第三步 下载Selenium IDE.SeleniumRC.IEDriverServer.SeleniumClient Dri ...

  2. HDU 5372 线段树

    给出两种操作: 第i个0:在x位置插入一个长度为i的线段,并输出该线段共覆盖了多少之前增加的线段 1:删除第i次插入的线段 官方题解:对于新插入的线段,查询有多少个线段左端点大于等于该线段的左端点. ...

  3. 讨论:怎样加快android的开机时间

    如题,近期项目须要,须要将android的开机时间大幅缩短,查了下网上资料,作用有限,望有处理过相关问题的兄弟姐妹參与讨论,给予不吝赐教,期待ing

  4. 从Unreal Engine 3到Unreal Engine 4

    Unreal Engine 4公布好长好长时间了.直到近期才有时间细致去看一下. TimSweeney老大一句话"IF YOU LOVE SOMETHING, SET IT FREE&quo ...

  5. ping 本地端口

    C:\Users\Administrator>netstat -ano | findstr 8001

  6. 【BZOJ 4556】字符串

    [链接]h在这里写链接 [题意]     给你一个长度为n(n<=10^5)的字符串以及一个整数m(m<=10^5),代表询问的次数.     每个询问由4个整数a,b,c,d给出    ...

  7. Instruction-Set Support for Invocation of VMM-Configured Services without VMM Intervention

    A processing core comprising instruction execution logic circuitry and register space. The register ...

  8. 初识Visual Studio Code 一.使用Visual Studio Code 开发C# 控制台程序

    原文:初识Visual Studio Code 一.使用Visual Studio Code 开发C# 控制台程序 1. 安装.NET Core 安装包下载地址:https://www.microso ...

  9. [React Native] Disable and Ignore Yellow Box Warnings in React Native

    Yellow box warnings in react native can be intrusive. We will use console.disableYellowBox to disabl ...

  10. 终端复用工具tmux的使用

    tmux的作用在于终端复用. 1. 在server上启动一个bash.并在里面执行tmux 2. 通过ssh远程登录server,执行tmux attach,就会切换到server上的那个bash中, ...