使用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. python3 偏最小二乘法实现

    python3的sklearn库中有偏最小二乘法. 可以参见下面的库说明:http://scikit-learn.org/stable/modules/generated/sklearn.cross_ ...

  2. (转)iptables详细教程:基础、架构、清空规则、追加规则、应用实例

    转自:http://lesca.me/archives/iptables-tutorial-structures-configuratios-examples.html iptables防火墙可以用于 ...

  3. 【Codeforces Round #443 (Div. 2) A】Borya's Diagnosis

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟 [代码] #include <bits/stdc++.h> using namespace std; const ...

  4. mybatis-generator使用

    开发工具:eclipse,依赖环境 :maven 首先在eclipse marketplace中安装mybatis-generator,如图: 安装后需要重启. 新建一个maven项目MybatisG ...

  5. 表单提交数据格式form data

    前言: 最近遇到的最多的问题就是表单提交数据格式问题了. 常见的三种表单提交数据格式,分别举例说明:(项目是vue的框架) 1.application/x-www-form-urlencoded 提交 ...

  6. SpringBoot学习:获取yml和properties配置文件的内容(转)

    项目下载地址:http://download.csdn.net/detail/aqsunkai/9805821 (一)yml配置文件: pom.xml加入依赖: <!-- 支持 @Configu ...

  7. ios sqlite数据库操作

    @interface MyViewController () { // 数据库实例,代表着整个数据库 sqlite3 *_db; } @end @implementation MyViewContro ...

  8. NSArray NSDictionary一些用法

    //从字符串分割到数组- componentsSeparatedByString: NSString *str = [NSString alloc] initWithString:@"a,b ...

  9. 程序猿必备软件转载自 www.uhdesk.com

    XMLSpy 2012 企业版中文破解版 软件描写叙述: XMLSpy是XML(标准通用标记语言的子集)编辑器,支持WYSWYG.支持Unicode.多字符集,支持Well-formed和Valida ...

  10. bootstrap课程1 bootstrap为什么这么火

    bootstrap课程1 bootstrap为什么这么火 一.总结 一句话总结:响应式,样式多,功能多. 1.bootstrap通过什么药实现响应式? 响应式web布局是让用户通过不同尺寸的浏览器都可 ...