首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Object.entry/Object.value在IE 11中未用Babel-polyfill定义

Object.entry/Object.value在IE 11中未用Babel-polyfill定义
EN

Stack Overflow用户
提问于 2019-07-30 20:19:48
回答 2查看 2.3K关注 0票数 0

为了优化我的应用程序的页面加载时间,我将包分成两个包:webpack-bundle (这包含我的代码)和vendor-bundle (包含节点模块中的所有内容)。但是当我的用户从访问我的网站时,我开始收到一些错误。他们会得到错误,比如“Object.entries”是未定义的,“Object.values”是未定义的。显然,我需要在我的其他包之前包含babel-polyfill并加载它。但是,当我的条目是一个对象时,我不知道该如何做。

这是旧的条目。它是一个数组(在我拆分包之前):

代码语言:javascript
运行
复制
const config = {
  "entry": [
    "es5-shim/es5-shim", 
    "es5-shim/es5-sham",
    "url-search-params-polyfill",   
    "@babel/polyfill",  
    "./app/registration"    
  ],

这是我当前的webpack.config,在这里,我将条目更改为对象并使用splitChunks。这会把两包放出来。

代码语言:javascript
运行
复制
const config = {
  "entry": {
    "webpack-bundle": "./app/registration"
  },

  "output": {
    filename: "[name].js",
    path: pathLib.resolve(__dirname, "../app/assets/webpack"),
  },

  "module": {
    "rules": [
      {
        "test": /\.(svg)$/,
        "use": [
          {
            "loader": "url-loader",
            "options": {"limit": 8192}
          }
        ]
      },
      {
        "test": /\.css$/,
        "use": [
          "style-loader",
          "css-loader"
        ]
      },
      {
        "test": require.resolve("react"),
        "use": {
          "loader": "imports-loader",
          "options": {
            "sham": "es5-shim/es5-sham",
            "shim": "es5-shim/es5-shim"
          }
        },
      },
      {
        "exclude": /node_modules/,
        "test": /\.jsx?$/,
        "use": {
          "loader": "babel-loader",
          "options": {
            "plugins": [
              "@babel/plugin-proposal-class-properties",
              ["@babel/plugin-proposal-decorators", {"legacy": true}],
              "@babel/plugin-proposal-export-namespace-from",
              "@babel/plugin-proposal-function-sent",
              "@babel/plugin-proposal-json-strings",
              "@babel/plugin-proposal-numeric-separator",
              "@babel/plugin-proposal-object-rest-spread",
              "@babel/plugin-proposal-throw-expressions",
              "@babel/plugin-syntax-dynamic-import",
              "@babel/plugin-syntax-import-meta",
              "@babel/plugin-transform-react-jsx"
            ],
            "presets": [
              "@babel/preset-env",
              "@babel/preset-react"
            ]
          }
        }
      }
    ],
  },

  "plugins": [
    new webpack.ProvidePlugin({
      "$": "jquery",
      "jQuery": "jquery",
      "window.jQuery": "jquery"
    }),
    new UglifyJsPlugin()
  ],

  "optimization": {
    "splitChunks": {
      "cacheGroups": {
        "vendor": {
          "test": /node_modules/,
          "chunks": "all",
          "name": "vendor-bundle"
        }
      }
    }
  },

  "resolve": {
    "alias": {
      "Lib": pathLib.resolve(__dirname, "app/lib/"),
      "Shared": pathLib.resolve(__dirname, "app/shared/")
    },
    "extensions": [".js", ".jsx"]
  }
};

module.exports = config;

巴伯尔

代码语言:javascript
运行
复制
{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-json-strings",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-transform-react-jsx",
   [ "@babel/plugin-transform-runtime", {"regenerator": true}]
  ],
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

我试着用这种方式重写条目,但没有用:

代码语言:javascript
运行
复制
 "entry": {
    "polyfill-bundle": "@babel/polyfill",
    "es5-shim-bundle": "es5-shim/es5-shim",
    "es5-sham-bundle": "es5-shim/es5-sham",
    "webpack-bundle": "./app/registration"
  },
  1. 如何确保babel/polyfill已加载并正在正确编译?我应该将它添加到条目中还是ProvidePlugin中?
  2. babel/polyfill不应该已经包含在vendor-bundle中了吗?
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-07-31 14:42:28

我建议用这个核心-js代替babel-poly填充。安装core-js,创建一个.babelrc文件并将其放入其中。

.babelrc

代码语言:javascript
运行
复制
{
 "presets": [
    [
     "@babel/preset-env",
     {
      "useBuiltIns": "usage",
      "corejs": 3
     }
   ],
   "@babel/preset-react"
  ]
}

webpack.conf.js

代码语言:javascript
运行
复制
const config = {
  "entry": {
    "webpack-bundle": "./app/registration"
  },

  "output": {
    filename: "[name].js",
    path: pathLib.resolve(__dirname, "../app/assets/webpack"),
  },

  "module": {
    "rules": [
      {
        "test": /\.jsx?$/,
        "exclude": /node_modules/,
        "use": {
          "loader": "babel-loader",
          }
        }
      },
      {
        "test": /\.css$/,
        "use": [
          "style-loader",
          "css-loader"
        ]
      },
      {
        "test": /\.(svg)$/,
        "use": [{
          "loader": "url-loader",
          "options": {
            "limit": 8192
          }
        }]
      },
    ],
  },

  "plugins": [
    new webpack.ProvidePlugin({
      "$": "jquery",
      "jQuery": "jquery",
      "window.jQuery": "jquery"
    }),
    new UglifyJsPlugin()
  ],

  "optimization": {
    "splitChunks": {
      "cacheGroups": {
        "vendor": {
          "test": /node_modules/,
          "chunks": "all",
          "name": "vendor-bundle"
        }
      }
    }
  },
  "resolve": {
    "alias": {
      "Lib": pathLib.resolve(__dirname, "app/lib/"),
      "Shared": pathLib.resolve(__dirname, "app/shared/")
    },
    "extensions": [".js", ".jsx"]
  }
};

module.exports = config;

package.jon

代码语言:javascript
运行
复制
"browserslist": [
  "last 2 version",
  "> 1%",
  "not dead"
],

上面的条目将为包括ie10和ie11在内的浏览器添加多填充。要检查这一点,请添加debug: true。控制台将准确显示已添加的内容、文件等。

代码语言:javascript
运行
复制
{
  debug: true,
  "useBuiltIns": "usage",
  "corejs": 3
}

更多的棕色github

票数 1
EN

Stack Overflow用户

发布于 2019-07-30 21:22:38

尝试像这样将babel-polyfill添加到条目中,下面是指向文档的链接。

代码语言:javascript
运行
复制
const config = {
  "entry": {
    "webpack-bundle": ["babel-polyfill","./app/registration"]
  },
...
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57279455

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档