使用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. 逻辑与和逻辑或:&& 、||

    逻辑或:首先看左边是真还是假(除了那5个都是真),如果为真,返回左边值,如果为假,返回右边的值 逻辑与:和逻辑或相同,先看左边的值是真是假,如果左边为真返回右边的值,左边为假返回左边的值 在两者同时出 ...

  2. 洛谷——P1011 车站

    https://www.luogu.org/problem/show?pid=1011#sub 题目描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车, ...

  3. [Angular] Design API for show / hide components based on Auth

    Simple Auth service: import { Injectable } from '@angular/core'; import {HttpClient} from '@angular/ ...

  4. java回调函数这样说,应该明确了吧!

    有哥们问我回调怎么用,回调怎么理解? 怎么说好呢,仅仅可意会不可言传呐,非也,回调在实际开发中使用频率事实上是非常高的,恰好我小时候也被回调函数欺负过,居然问了,那么肯定要好好分享一下我的一些经验. ...

  5. 编程算法 - 远征队(expedition) 代码(C)

    远征队(expedition) 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 远征队有一辆卡车须要行驶L单位的距离, 開始时, 车上有P单位的 ...

  6. QMap 的增删改查

    map 是一种数据容器,它提供一种由key 到 value 的映射.map 的key 是唯一的, 也是有序的.map 通常由近似平衡的红黑树来实现.key 的有序性,使得插入,查找节点比较有效.map ...

  7. 【27.85%】【codeforces 743D】Chloe and pleasant prizes

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  8. java异常中Exception捕获不到的异常

    一 概念 众所周知java提供了丰富的异常类,这些异常类之间有严格的集成关系,分类为 父类Throwable Throwable的两个子类Error和Exception Exception的两个子类C ...

  9. Android开发之SpannableString具体解释

    在实际的应用开发过程中常常会遇到.在文本的不同部分显示一些不同的字体风格的信息如:文本的字体.大小.颜色.样式.以及超级链接等. 普通情况下,TextView中的文本都是一个样式.对于类似的情况.能够 ...

  10. 洛谷 P3908 异或之和

    洛谷 P3908 异或之和 题目描述 求1⨁2⨁⋯⨁N 的值. A⨁B 即 AA, B 按位异或. 输入输出格式 输入格式: 1 个整数 N . 输出格式: 1 个整数,表示所求的值. 输入输出样例 ...