在useBuiltIns设置为“usage”的情况下，项目导入了由Webpack生成的库时出现问题
在使用Webpack生成的库时，如果在项目中将useBuiltIns设置为"usage"，可能会出现一些问题。
useBuiltIns是Babel的一个配置选项，用于指定在转译代码时是否根据目标环境自动引入polyfill。当设置为"usage"时，Babel会根据代码中使用的特性自动引入所需的polyfill，以减小打包体积并提高运行效率。
然而，在导入由Webpack生成的库时，由于库已经经过打包处理，其中可能已经包含了一些polyfill，这些polyfill与项目中由Babel根据useBuiltIns设置自动引入的polyfill可能存在冲突。
为了解决这个问题，可以尝试以下几种方法：
- 在项目的Babel配置文件中，将useBuiltIns设置为"entry"而不是"usage"。这样做会强制Babel根据目标环境引入所有的polyfill，而不是根据代码中使用的特性。这样可以确保项目和库中使用的polyfill一致，避免冲突。
- 在项目中手动引入库所需的polyfill。可以通过在入口文件中使用import语句引入需要的polyfill，或者使用第三方库如core-js来手动引入polyfill。这样可以控制项目中使用的polyfill，避免与库中的polyfill冲突。
- 如果库是由自己开发的，可以在打包库时排除掉不需要的polyfill。可以通过在库的Webpack配置中使用exclude或ignore选项来排除polyfill的引入，或者在库的代码中使用条件语句来避免不必要的polyfill引入。
需要注意的是，以上方法仅适用于由Webpack生成的库。对于其他类型的库，可能需要根据具体情况采取不同的解决方案。
推荐的腾讯云相关产品：腾讯云函数（Serverless Cloud Function），它是一种无需管理服务器即可运行代码的计算服务。腾讯云函数可以用于构建和部署云原生应用，支持多种编程语言和触发器，具有高可靠性和弹性扩展能力。您可以通过腾讯云函数来部署和运行由Webpack生成的库，以解决useBuiltIns设置为"usage"时的问题。
腾讯云函数产品介绍链接地址：https://cloud.tencent.com/product/scf
相关·内容
我使用单个.babelrc配置，并在webpack.config.client.js和webpack.config.server.js中与babel-加载程序一起使用它。
.babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"debug": false,
"modules": false,
"loo
浏览 0提问于2018-09-01得票数 8
回答已采纳
我想写一个可重用的UI组件库，并用Webpack将其打包。但是，当我将其导入到另一个项目中时，其中babelrc设置了useBuiltIns: 'usage'，导入将失败，并显示错误： "export 'default' (imported as 'Component') was not found in 'component' 这是我在库项目中的webpack配置的一部分： output: {
path: path.resolve(process.cwd(), './dist'),
filena
浏览 123提问于2019-08-28得票数 0
在webpack v4和babel v7上，我想使用@babel\preset-env的useBuiltIns: "usage"选项为所需的多边形填充获取特定的导入，但我想将导入的多边形填充从我的主包中分离出来，并将它们放入另一个文件中，比如polyfills.js或其他文件。 在webpack关于垫片的文档中有一个bundling the polyfills into a separate file的例子，但是它需要一个单独的带有声明导入的入口文件。问题是，对于useBuiltIns: "usage"，您不应该声明任何导入(see the docs)，因为B
浏览 22提问于2020-07-02得票数 1
我有一个symfony 5项目，我和webpack一起使用--安可和巴别塔 首先，我在webpack.config.js中激活了巴别塔： .configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
}) 在通过encore转储生成的配置后，我似乎开始制作这个babel.config.js文件： module.exports = {
'presets': [
[
'@babel/preset-e
浏览 15提问于2020-06-04得票数 5
回答已采纳
我已经让Webpack使用了Babel并包含了@babel/polyfill，但是IE11在NodeList上使用.forEach时仍然抛出了一个SCRIPT438错误。
这是我的package.json
{
...
"scripts": {
"build:js": "webpack --config ./_build/webpack.config.js"
},
...
"browserslist": [
"IE 11",
"last 3 versions"
浏览 3提问于2018-11-16得票数 13
回答已采纳
当我和webpack一起构建或运行一个网站时，我得到了一些随机的错误，关于require不是一个函数。这发生在不同模块的不同点上，在一个深度嵌套的请求解析的callstack上。 我在谷歌上广泛搜索了这个错误，发现它可能是由许多不同的症状引起的。我已经尝试了我能找到的所有方法，但没有一个对我有效。 我在这里发布了一个解决方案，以显示什么对我有效，以防其他人可能遇到同样的问题。 以下是webpack集的相关部分： /**
* @returns {import('webpack').RuleSetRule}
*/
module.exports = () => ({
浏览 134提问于2019-04-12得票数 0
Babel配置：
"babel": {
"presets": [
[
"@babel/env",
{
"targets": {
"ie": "9"
},
"useBuiltIns": "usage",
"corejs": 3
}
]
]},
节点模块：
"devDependencies": {
"@babel/core":
浏览 13提问于2020-05-06得票数 1
我试图让我的代码在Android4.1WebView上运行，它不支持ES6。
但是我发现了一个错误：
秘密SyntaxError:在严格模式下使用const。
.babelrc config
{
"plugins": [
"lodash"
],
"presets": [
"@babel/preset-react",
[
"@babel/preset-env",
{
"targets": {
浏览 2提问于2018-03-27得票数 7
回答已采纳
我的webpack.config.js是这样的
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
mode:'development',
target: ['web', 'es5'],
module
浏览 246提问于2023-08-11
1回答
使用babel 7.5.5，core-js 3.1.4和webpack 4.38.0，如何将核心js排除在传输之外？
我不想完全排除node_modules ，因为我有需要转换的lib
如果我使用exclude: /node_modules\/(core-js)/，核心js模块会抛出
TypeError：$不是函数
这给我留下了另外两个选择。
相反，请包含我的src目录和每个需要逐个转换的依赖项。
使用useBuiltIns: entry而不是使用，因为在本例中，exclude: /node_modules/\(core-js)/工作，import core.js位于
浏览 2提问于2019-08-05得票数 6
回答已采纳
我正在努力改进对我的应用程序的支持，它是通过ES6通过@babel/polyfill和browserslist支持编写的。我已经遵循了上的所有说明，但我想我遗漏了一些东西。
我的browserslist支持是通过package.json定义的。我正在通过检查Array.from (它在整个代码中使用)来验证安装是否有效。
知道为什么我不能看到编译代码中的多填充吗？我过去常常在入口点声明多边形填充，但是babel文档现在说这是不需要的。
如果useBuiltIns：‘.babelrc’是在.babelrc中指定的，那么在webpack.config.js条目数组或源中都不要包含@babel/p
浏览 0提问于2019-03-29得票数 6
使用，我一直在尝试使用：@babel/preset-env和core-js与一个.browserslist文件来设置一个最优的构建配置。
就我所理解的文档而言，他们说preset-env with useBuiltins:"usage"将在我的代码中更新import 'core-js/stable'语句，只包含所需的函数。
但是，无论我设置last 1 chrome version还是>1% in NL (它们是相当多且更老的浏览器)，构建文件的大小都是相同的(大约3MB)。
我遗漏了什么？
我在这里有一个测试回购：
为便于快速查阅，有关档案：
浏览 1提问于2019-04-17得票数 7
我用Webpack和我的Vuejs应用程序。
我无法在IE11上加载我的应用程序。这是控制台的样子：
控制台状态为SCRIPT1010: Expected identifier
webpack.config.js
{
test: /\.(es6|js|mjs)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
浏览 2提问于2020-09-26得票数 1
回答已采纳
1回答
在构建项目时，gulp会将修改后的文件复制到新的dist文件夹中。“‘Dev”附加到此文件名后。 example 所有这些通常都编译到主dist文件夹中，但如果您长时间使用程序集，会出现许多这样的新文件夹。你怎么解决这个问题呢？ Gulpfile： "use strict";
const gulp = require("gulp");
const webpack = require("webpack-stream");
const browsersync = require("browser-sync");
const
浏览 27提问于2020-08-24得票数 0
3回答
我从堆栈溢出中添加了许多由Babel或其他人提供的设置，但是ES6的新特性(如箭头函数和默认参数)仍在我的bundle.js中
bundle.js的内容如下：
var nn = function(e={}) {
const {baseClasses: t, newClasses: n, Component: r} = e;
if (!n)
return t;
const a = At()({}, t);
return Object.keys(n).forEach(e=>{
浏览 0提问于2019-04-24得票数 2
回答已采纳
我刚刚设法让webpack创建了两个独立构建，一个用于es5，另一个用于es6。请看下面的配置文件： const path = require("path");
const common = require("./webpack.common");
const merge = require("webpack-merge");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("
浏览 24提问于2020-11-01得票数 0
回答已采纳
2回答
我试着用React设置了Webpack 4.6.0，我遇到了一个问题：
在中
...
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules(?!\/myuimodule)/,
use: ['babel-loader'],
},
...
在.babelrc中
{
"presets": [
"@babel/react",
[
"@babel/preset-env",
{
"useBu
浏览 0提问于2018-04-23得票数 1
1回答
我用webpack为我的客户捆绑我的代码。根据我在这里的问题，，我想使用Promise.any()，但是Promise.any只适用于Chrome85+，我的客户需要我支持Chrome80+。当然，我认为使用babel可以填充Promise.any()，例如corejs提供。但是我不知道我做错了什么，现在我甚至不能让Promise.any为Chrome85+工作！
以下是我所做的，
首先，我的webpack.config.js
module.exports = {
entry: {
index: './src/index.js'
ui:&
浏览 5提问于2021-02-07得票数 4
当我用Babel和Webpack传输IE11时，我在ES6中得到了这个错误：
“对象不支持属性或方法‘追加’”
我环顾了互联网，在这里找到了解决方案： --我把这段代码粘贴到我的源程序js文件中，当IE11与Babel传输时，IE11不再显示错误了。但是..。
是否有办法与Babel和Webpack一起传输代码，而不必像我那样手动粘贴代码？
这是我的.babelrc文件：
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
浏览 1提问于2019-12-14得票数 0
回答已采纳
1回答
我试图使两个构建的网页，一个为现代浏览器，另一个让旧IE 11快乐。现在我有webpack和babel，webpack有很多心事：
module.exports = [
{
//more config
name: "modern",
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
浏览 10提问于2022-02-14得票数 1
回答已采纳
在一个Symfony5项目中，我使用VueJS框架(单文件组件)。
在我的组件VueJS样式部分中，我需要使用"url“css规则和文件路径定义。
特别是像这样的背景图像设计div：
<style lang="scss" scoped>
#presentation
{
height: 800px;
width: 100%;
background-image: url('/build/images/presentation.jpg');
}
</style>
浏览 12提问于2022-02-23得票数 0
由于我还需要支持IE11，我还需要转译node_modules。
这是我在node_modules上使用的babel配置：
presets: [
['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
],
我使用useBuiltIns选项是因为它给出了一个错误Symbol is not defined，需要polyfill。
然而，这个配置在编译时中断，可能是因为它在代码中注入了一些imports，下面是错误：
基本上，它不喜欢module.exports。那么如何在供应商
浏览 19提问于2018-09-19得票数 21
回答已采纳
我有一个叫symfony 4的应用程序，里面有webpack--安可和纱线。似乎无法在linux主机上正确构建，但在macos上构建后可以正常工作 这是我的app.js的一部分 styles...
const $ = require('jquery');
require('jquery-ui');
require('bootstrap');
require('owl.carousel');
other JS... 和webpack的配置 const Encore = require('@symfony/webpack-e
浏览 29提问于2019-05-12得票数 1
回答已采纳
根据react-datepicker文档，我尝试导入css文件，但react作为You may need an appropriate loader to handle this file type抛出了一个错误。我已经在webpack-config文件中包含了css-loader。有什么东西丢了吗？以下是jsx文件的import部分
import React, { Component } from 'react';
import moment from 'moment';
import DatePicker from 'react-datepicker
浏览 0提问于2018-10-01得票数 2
我已经用给定的命令symfony new app --webapp创建了一个Symfony完整的web应用程序。它附带了配置为的webpack-encore。我可以用npm run watch编译我的资产。但是浏览器不会在我的I进行更改时自动重新加载。我尝试过使用来跟踪Symfony的官方文档，但是没有起作用。
webpack.config.js (我刚刚删除了注释)：
const Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
浏览 11提问于2022-03-05得票数 0
回答已采纳
1回答
我使用babel编译了我的简单代码，如下所示。
var aa = new Promise();
至
"use strict";
require("core-js/modules/es.object.to-string");
require("core-js/modules/es.promise");
var aa = new Promise();
但是，像IE9这样的旧浏览器无法执行该代码。因为浏览器无法解析路径core-js/modules/es.object.to-string.
我必须用webpack来填充吗？
我不想用webpack
浏览 3提问于2019-11-04得票数 0
我试图用babel配置webpack (5)，使用babel-加载程序将其传输到ES5。不幸的是，输出不一致。基本上，它分为两部分：
一些填充物：
我的代码：
如您所见，第一部分包含箭头函数，第二部分不包含箭头函数。我尝试将@babel/plugin-proposal-class-properties和@babel/plugin-transform-arrow-functions添加到@babel/plugin-transform-arrow-functions文件中，但是class-properties缺失(启用调试)。
我必须承认，我不确定class-prope
浏览 7提问于2020-10-13得票数 6
回答已采纳
我的webpack.config正在向webpack配置条目属性中添加core-js/stable和regenerator-runtime/runtime：
const config = {
name: 'client',
target: 'web',
entry: ['core-js/stable', 'regenerator-runtime/runtime', 'src/index'],
我的babel配置正在使用useBuiltIns: 'entry'
我有下面的.br
浏览 5提问于2022-04-20得票数 0
对于@babel/preset-env的不同配置，我得到了不同的输出，useBuiltIns与@babel/transform-runtime结合使用。我读过这些文档，但还没有弄清楚最佳实践应该是什么。
例如，当目标浏览器列表中包含边缘18时，带有@babel/preset-env的useBuiltIns将为string.replace添加一个多边形填充。
但是，当我使用@babel/transform-runtime时，就不会添加这种填充。
所以，从这个问题开始：
Does `string.replace` need to be polyfilled for Edge 18?
我检查了
浏览 7提问于2020-08-03得票数 18
回答已采纳
我正在尝试配置babel预设-env来处理自动注入多填充，相对于指定的目标浏览器列表。
文档指出，使用以preset-env形式的属性配置"useBuiltIns": "usage"预置将完全做到这一点。
(我注意到仅指定这个属性就会在控制台中显示一个警告，说明我应该指定要使用的core-js版本，所以我也添加了这个版本。)
因此，我的babel.config.js如下所示：
module.exports = {
"presets": [
"@babel/preset-react",
"@babel/p
浏览 4提问于2020-02-15得票数 3
1回答
我试图在我的Symfony 5项目上集成ReactJS，但是导入它之后，它似乎破坏了代码。
我遵循了和上提到的步骤
在Symfony项目上安装Webpack Encore。
安装开发依赖项react和react-dom。
在app_react.js中创建一个类似于assets/js/的文件，然后将其作为一个新条目添加到webpack.config.js和.addEntry('app_react', './assets/js/app_react.js')中。
base.html.twig中的参考<script src="{{ asse
浏览 2提问于2020-06-17得票数 0
回答已采纳
1回答
我使用的是Webpack，我想要设置Babel的"useBuiltIns“选项，以便在我的JS文件中为"promises”启用pollyfills。
我找不到一个完整的工作示例，我所有的尝试都以错误告终。
这是我的package.json try：
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencie
浏览 11提问于2020-06-08得票数 0
使用我当前的配置(见下文)，我得到这个错误：
[object Error]{description: "Argument ob...", message: "Argument ob...", name: "TypeError", number: -2147418113, stack: "TypeError: ...", Symbol()_7.bs7gi3oa3wi: undefined}
我试着基于Symbol()_ ... : undefined}进行挖掘，但我找不到任何明确的指示。
这是我的.babel.config.j
浏览 9提问于2020-04-05得票数 14
我在我的chrome中启用了Enable JavaScript source maps和Enable CSS source maps。
我的IDE中的源代码：
Promise.resolve().finally();
class MySpecialClass {
}
export default (text = "11112221") => {
const element = document.createElement("div");
element.innerHTML = text;
new MySpecialClass
浏览 0提问于2018-08-28得票数 2
我试图瞄准所有浏览器的最后4个版本，除了。下面是webpack配置的一部分：
...
{
test: /\.js$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
sourceType: "unambiguous",
plugins: [
[
浏览 2提问于2021-02-15得票数 0
1回答
我用点燃元素创建了自定义的web组件，它与Chrome、Firefox、Eadge、Opera都很好地工作，但只在IE11中不工作。我还试图将它编译成es5，但仍然没有成功。
IE控制台中的错误：
Webpack规则：
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: ['@babel/pl
浏览 1提问于2019-10-04得票数 0
我的任务是使其中一个移动应用程序的反应兼容歌剧迷你在极端模式。在测试过程中，我了解到在反应代码中没有任何东西在那里起作用，但是在文件之前包含这个main.js文件，它实际上是起作用的。
我试着把它包含给Webpack，所以代码实际上被转换了，而不是包含一个庞大的库，但没有成功。
package.json文件
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-proposal-class-properties": "^7.10.1",
浏览 0提问于2020-07-08得票数 0
我正在使用Symfony + Vue.js，并且我想在所有vue组件中导入我的_variables.sccs文件。我想在所有组件的样式块中使用scss变量
我知道如何在使用vue-cli (使用vue.config.js配置文件)创建的vue应用程序中做到这一点，但我已经尝试在Encore使用的webpack.config.js中以不同的方式复制它。而且也没有办法让它发挥作用。
这是我的webpack.config.js文件：
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath(
浏览 0提问于2020-02-26得票数 3
我马上警告你，我已经读过所有类似的问题了
我在package.json中的babel配置
"babel": {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage"
}
],
[
"@babel/preset-react",
{
"useSpread":
浏览 1提问于2020-02-04得票数 0
希望在以下方面得到一些帮助：
问题
@babel/polyfill会导致IE11中的错误：
SCRIPT1010: Expected identifier
调试器指向行：
if (delegate.iterator.return) {
在函数maybeInvokeDelegate()中的regenerator-runtime插件。
但
只有在测试环境中才会出现问题。当我在本地运行我的应用程序时，使用完全相同的构建，相同的浏览器，它工作得很好。它包含相同的代码，但它不会破坏任何东西。
我已经尝试过的：
似乎帮不上忙。
我试图将@babel/Poly填充替换为只需要的填充，但我失败了。很多
浏览 2提问于2019-02-08得票数 2
回答已采纳
我正在尝试使用React.memo来记录redux连接的组件。我的代码在主要浏览器中运行正常，但IE抛出错误： You must pass a component to the function returned by connect. Instead received {"$$typeof":60115,"compare":null} 组件代码： import React, { memo } from 'react';
import { connect } from 'react-redux';
const MyCompon
浏览 25提问于2020-09-21得票数 0
回答已采纳
我最近开始和Webpack一起工作，我遇到了一个与我的Babel and Core (v3)设置相关的构建错误。
我得到的错误如下:模块未找到:错误:无法解析'C:\path\‘@ file.jsx中的'core-js/modules/es.string.replace’
这是在一个React项目上，而我尝试使用的函数是在我的一个jsx组件上。
我的package.json看起来像这样：
"devDependencies": {
"@babel/cli": "^7.8.4",
"@b
浏览 28提问于2020-05-29得票数 2
我从事Symfony项目，但当我想实现Tailwind时，我遇到了问题，当我想要呈现图像时，它返回404。我浏览了整个网络，没有找到答案，请帮助我。
顺便说一下。通过url绘制图像也不起作用
webpack.config.js
const path = require('path');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools
浏览 12提问于2021-12-24得票数 0
回答已采纳
1回答
我通常在Laravel项目中使用和，IE11上没有问题。
没有在IE11上进行测试，我继续我的开发，只使用Chrome进行测试。我确实使用了一个新的插件，插件，我已经使用了验证。我真的不知道这是否是我的问题的原因。
这是我的IE上显示的控制台错误：
SCRIPT1010: Expected identifier
dashboard.js (7602,11)
附加的图像是dashboard.js (7602,11)：
webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-pol
浏览 4提问于2022-01-06得票数 0
回答已采纳
我面临着一个相当恼人和令人沮丧的异常，即Serverless + Webpack在.serverless/<package>.zip中生成空文件。
配置
serverless.yml
...
webpack:
webpackConfig: ./webpack.config.js
includeModules: true
...
webpack.config.js
const slsw = require("serverless-webpack")
const nodeExternals = require("webpack-no
浏览 4提问于2021-01-23得票数 1
回答已采纳
继this question之后，我设置了我的Webpack 4配置来处理babel-loader，如下所示 {
module : {
rules : [{
test : /\.js$/,
// Some module should not be transpiled by Babel
// See https://github.com/zloirock/core-js/issues/743#issuecomment-572074215
exclude: ['/node_modules/', /\bcore-js\b
浏览 52提问于2020-05-04得票数 1
1回答
我正在努力减少nextjs项目的包大小。有一个用于多填充的core-js包。我想从主包大小中删除这个核心-js。它有50 It的大小。
我尝试使用这样的定制babel配置：
{
"presets": [
[
"next/babel",
{
"useBuiltIns": "usage",
"corejs": "3"
浏览 7提问于2022-07-01得票数 0
我正在接近雪堆，以前用过Webpack + Babel装载机。我遗漏了一些东西，我知道是什么:某种，类似于，，多边形填充或转换。我不知道让require在浏览器中工作的Webpack的内部结构，但我无法在雪堆中获得同样的效果。
在我的snowpack.config.json中，我正在加载Babel插件：
{
"buildOptions": {
"clean": true,
"out": "dist"
},
"mount": {
"src": "/"
浏览 4提问于2020-12-02得票数 1
回答已采纳
1回答
我正在从v6升级到Babel v7，当我构建这个项目时，我得到了以下错误： 语法错误: src\app\layout\components\FooterToolbar.js:意外的标记 ? 我正在使用以下.babelrc配置 {
"presets": [
["@babel/preset-env", { "useBuiltIns": "usage", "debug": true }],
"@babel/preset-typescript",
"@babel
浏览 10提问于2019-04-03得票数 5
1回答
我已经开始使用webpack在我的Symfony 5网络应用程序，但仍然没有完全弄清楚。我想使用webpack以外的节点模块，但我找不到这样的方法。
例如，我已经安装了Datatable，我想在public/assets/js目录下的JavaScript文件中使用它，但是当我尝试使用时，我得到了$(...).DataTable is not a function。
在我的app.js中，我导入了我需要的所有模块：
import 'select2';
import 'parsleyjs';
import 'datatables';
这是我的webp
浏览 1提问于2021-08-12得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
