使用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. 单位转换 inch mm mil

    从上面看:英寸(inch)是最大的单位   其次是毫米(mm)  再次是密耳(mil)

  2. (转)30 IMP-00019: row rejected due to ORACLE error 12899

    IMP: row rejected due IMP: ORACLE error encountered ORA: value too large , maximum: )导入日志报 IMP: 由于 O ...

  3. 苹果手机wifi代理设置方法--用于抓包

    杯具了!@@@@@@@变态的公司不能直接上网了,但是经过我的研究.可以用代理上网,电脑是可以了,但是的iphone肿么办,哇咔咔,不要捉急,我来告诉你怎么让你的iphone通过代理上网.动起来吧. 请 ...

  4. ORACLE RMAN备份--差异增量与累积增量的策略实例图

    转自原文 ORACLE RMAN备份--差异增量与累积增量的策略实例图

  5. 【rlz01】完全数

    Time Limit: 3 second Memory Limit: 2 MB 问题描述 所谓完全数,就是这个数除了它本身的约数之和也等于这个数,比如说6的约数有1.2.3,而1+2+3=6,所以6是 ...

  6. Python爬虫之路——简单的网页抓图

    转载自我自己的博客:http://www.mylonly.com/archives/1401.html 用Python的urllib2库和HTMLParser库写了一个简单的抓图脚本.主要抓的是htt ...

  7. 【55.70%】【codeforces 557A】Ilya and Diplomas

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  8. 设置UIButton的文字显示位置、字体的大小、字体的颜色

    btn.frame = CGRectMake(x, y, width, height); [btn setTitle: @"search" forState: UIControlS ...

  9. jquery 多选框 checkbox 获取选中的框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. [Angular Unit Testing] Shallow Pipe Testing

    import { TestBed, ComponentFixture } from '@angular/core/testing'; import { BrowserDynamicTestingMod ...