如何安装babel-polyfill库?

2020/11/17 21:23 · javascript ·  · 0评论

我刚刚开始使用Babel将我的ES6 javascript代码编译成ES5。当我开始使用Promises时,它似乎无法正常工作。Babel网站声明了通过polyfills支持承诺的支持。

没有运气,我尝试添加:

require("babel/polyfill");

要么

import * as p from "babel/polyfill";

这样,我将在应用程序引导时收到以下错误:

找不到模块“ babel / polyfill”

我搜索了模块,但似乎这里缺少一些基本的东西。我还尝试添加了旧的和好的蓝鸟NPM,但看起来好像没有用。

如何使用Babel的polyfills?

这在babel v6中有所改变。

从文档:

polyfill将模拟完整的ES6环境。使用babel-node时会自动加载此polyfill。

安装:
$ npm install babel-polyfill

在Node / Browserify / Webpack中的用法:

要包含
polyfill,您需要在应用程序入口点的顶部要求它。

require("babel-polyfill");

在浏览器中的用法:npm版本中

dist/polyfill.js文件中可用babel-polyfill必须在所有已编译的Babel代码之前将其包括在内。您可以将其添加到已编译的代码<script>之前,也可以将其包含在之前。

注意:请勿require通过browserify等使用babel-polyfill

巴贝尔文档描述了这个漂亮的简洁:

Babel包含一个polyfill,其中包含一个自定义的再生器运行时和core.js。

这将模拟完整的ES6环境。使用babel-node和babel / register时会自动加载此polyfill。

在调用其他任何内容之前,请确保在应用程序的入口点需要它。如果您使用的是webpack之类的工具,这将变得非常简单(您可以告诉webpack将其包含在捆绑软件中)。

如果您使用gulp-babel这类工具babel-loader,则还需要安装babel软件包本身才能使用polyfill。

还要注意,对于影响全局范围的模块(polyfill等),可以使用简洁的导入来避免模块中使用未使用的变量:

import 'babel/polyfill';

对于Babel版本7,如果您使用@ babel / preset-env,要包括polyfill,您要做的就是在babel配置中添加一个标记“ useBuiltIns”,值为“ usage”。您无需在应用程序的入口处要求或导入polyfill。

指定此标志后,babel @ 7将进行优化,仅包含您需要的polyfills。

要在安装后使用此标志:

npm install --save-dev  @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

只需添加标志:

useBuiltIns: "usage" 

在您的babel配置文件“ babel.config.js”(也是Babel @ 7的新内容)下的“ @ babel / env”部分中:

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage"  // <-----------------*** add this
         }
      ]
   ];

   return { presets };
};

参考:


2019年8月更新:

随着Babel 7.4.0的发布(2019年3月19日),@ babel / polyfill已被弃用。您将安装core-js而不是安装@ babe / polyfill:

npm install --save core-js@3

新条目corejs将添加到babel.config.js中

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage",
             corejs: 3  // <----- specify version of corejs used
         }
      ]
   ];

   return { presets };
};

参见示例:https : //github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

参考:

如果您的package.json如下所示:

  ...
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-eslint": "^6.0.4",
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.3.0",
  ...

并且您收到Cannot find module 'babel/polyfill'错误消息,那么您可能只需要更改导入语句,即可:

import "babel/polyfill";

至:

import "babel-polyfill";

并确保它在任何其他import语句之前(不一定在应用程序的入口点)。

参考:https : //babeljs.io/docs/usage/polyfill/

首先,没有人提供的明显答案,您需要将Babel安装到您的应用程序中:

npm install babel --save

(或者babel-core如果您想这样做require('babel-core/polyfill'))。

除此之外,我还有一个艰巨的任务来将我的es6和jsx转换为构建步骤(即,我不想使用babel/register,这就是为什么我首先尝试babel/polyfill直接使用的原因),所以我想在@ssube的答案的这一部分更加强调:

在调用其他任何内容之前,请确保在应用程序的入口点需要它

我遇到了一个奇怪的问题,我试图babel/polyfill从某个共享环境启动文件中进行请求,但出现了用户引用的错误-我认为这可能与babel订单导入与需求的方式有关,但我无法复制现在。无论如何,将其import 'babel/polyfill'作为客户端和服务器启动脚本中的第一行来解决此问题。

请注意,如果您改为使用,require('babel/polyfill')我将确保所有其他模块加载器语句也都需要并且不使用导入-避免将两者混用。换句话说,如果您的启动脚本中有任何import语句,请在脚本import babel/polyfill的第一行而不是require('babel/polyfill')

babel-polyfill允许您使用语法更改之外的全部ES6功能。这包括诸如新的内置对象(如Promises和WeakMap)以及新的静态方法(如Array.from或Object.assign)之类的功能。

没有babel-polyfill,babel仅允许您使用诸如箭头功能,解构,默认参数以及ES6中引入的其他特定于语法的功能等功能。

https://www.quora.com/What-does-babel-polyfill-do

https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423

就像Babel在文档中说的那样,对于Babel> 7.4.0,建议使用@ babel / polyfill模块,因此建议直接使用@ babel / polyfill中包含的core-jsregenerator-runtime库。

所以这对我有用:

npm install --save core-js@3.6.5
npm install regenerator-runtime

然后将其添加到初始js文件的顶部:

import 'core-js/stable';
import 'regenerator-runtime/runtime';
本文地址:http://javascript.askforanswer.com/ruheanzhuangbabel-polyfillku.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!