zikro

zikro

关注
发信
关注(28)粉丝(399)

如何为IE11正确使用babel/corejs3/webpack?

本文介绍了如何为IE11正确使用babel/corejs3/webpack?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用我当前的配置(见下文)，我收到此错误:

With my current config (see below), I'm getting this error:

   [object Error]{description: "Argument ob...", message: "Argument ob...", name: "TypeError", number: -2147418113, stack: "TypeError: ...", Symbol()_7.bs7gi3oa3wi: undefined}

我试图根据 Symbol()_ ...:undefined} 进行挖掘，但是找不到任何明确的指示.

I tried to dig based on Symbol()_ ... : undefined} but I couldn't find any clear indication.

这是我的 .babel.config.js :

module.exports = function (api) {
    api.cache(true);
    const presets = [
      [
        '@babel/preset-env',
        {
         // modules: false,
          corejs:"3.6.4",
          useBuiltIns: 'usage',
          targets: {
            browsers: [
              "edge >= 16",
              "safari >= 9",
              "firefox >= 57",
              "ie >= 11",
              "ios >= 9",
              "chrome >= 49"
            ]
          }
        }
      ]
    ];
    const plugins= [
        ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ];
    return {
      presets,
      plugins
    }
  }

这是我的 webpackconfig.js 

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
       // exclude: /node_modules/,
       exclude : [
        /\bcore-js\b/,
        /\bwebpack\/buildin\b/
      ],
        use: {
          loader: 'babel-loader',
          options:{
            sourceType: "unambiguous"
          }
        },
      },
    ],
  },
  devtool:"cheap-source-map",
  resolve: {
    extensions: ['*', '.js'],
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'shim.js',
  }
};

我还尝试了许多替代方法，这是我目前的替代方法，使用 entry:"usage" ，但不排除 node_modules .

I've also tried many alternatives, this is my current one, with entry:"usage" and not excluding node_modules.

这来自我的 package.json :

 "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@babel/preset-env": "^7.9.5",
    "babel-loader": "^8.1.0",
    "eslint": "^6.8.0",
    "eslint-config-google": "^0.14.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "dotenv-webpack": "^1.7.0"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "ismobilejs": "^1.0.3",
    "localforage": "1.7.3",
    "postmate": "^1.5.2",
    "uuid": "^7.0.3"
  }

错误似乎来自第一次调用 Postmate 库，即 new Postmate({...})(我之前有一个 console.log ).在进行此呼叫之前，我已经完成了 localforage 的工作，并且诺言成功完成了.

Error seems to come from the first invocation of the Postmate library i.e. new Postmate({...}) (I have a console.log just before). Prior to this call, I have one to localforage and the promise complete succesfully.

推荐答案

使用 useBuiltIns:用法"

您通常必须在代码输入文件中导入要使用的模块(例如Postmate )；没有polyfills；每个使用的polyfill将由 @ babel/preset-env 进行相应处理.另外， @ babel/preset-env 中的 corejs 的版本必须为单个数字(即 3 或2 ).

Using useBuiltIns: "usage"

You'll have to normaly import the modules you want to use (i.g. Postmate) inside your code entry file; no polyfills; every polyfill used will be handled accordingly by @babel/preset-env. Also, the version of corejs in @babel/preset-env has to be a single number (i.e. 3 or 2).

module.exports = function (api) {
  api.cache(true);
  const presets = [
    [
      '@babel/preset-env',
      {
        corejs : {
          version : "3",
          proposals : true
        },
        useBuiltIns: 'usage',
        targets: {
          browsers: [
            "edge >= 16",
            "safari >= 9",
            "firefox >= 57",
            "ie >= 11",
            "ios >= 9",
            "chrome >= 49"
          ]
        }
      }
    ]
  ];
  const plugins= [
      ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ];
  return {
    presets,
    plugins
  }
}

webpackconfig.js 的内容:

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: [
          /\bcore-js\b/,
          /\bwebpack\/buildin\b/
        ],
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            configFile: path.resolve(__dirname, 'babel.config.js'),
            compact: false,
            cacheDirectory: true,
            sourceMaps: false,
          },
        },
      },
    ],
  },
  devtool: "cheap-source-map",
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'shim.js',
  }
}

入口JS文件 src/index.js 的内容:

import Postmate from 'postmate';

// Postmate and rest of the code
...

它将生成:

dist/shim.js      177K
dist/shim.js.map  140K

您可以在以下 IE 11 中使用 useBuiltIns:"usage" 来测试在线分布式示例，该示例如下: https://zikro.gr/dbg/so/61044894/usage/.(子iFrame具有将父窗口背景颜色更改为随机颜色的按钮)

You can test an online distributed example working using useBuiltIns: "usage" in IE 11 here: https://zikro.gr/dbg/so/61044894/usage/. (The child iFrame has a button that changes parent window background color to a random color)

您可以在此Github存储库/分支中找到包含整个项目和使用示例分支的存储库: https://github.com/clytras/ie11-postmate/tree/usage

You can find a repository with the whole project and the usage example branch in this Github repository/branch: https://github.com/clytras/ie11-postmate/tree/usage

根据此问题，讨论使用符号会导致IE11中出现异常" ，您必须:

According to this issue disqussion "using Symbol causes exception in IE11", you have to:

  1. 在 .js 文件的规则中排除 @ babel-runtime 和 core-js .
  2. 将 corejs:"3" 和 useBuiltIns:'entry'设置为在 babel内部预设的 @ babel/preset-env .config.js 文件.
  3. 进入源JS文件中必须有 core-js/stable 和 postmate 导入.
  1. Exclude @babel-runtime and core-js in the rule for .js files.
  2. Have corejs: "3" and useBuiltIns: 'entry' to @babel/preset-env preset inside babel.config.js file.
  3. There have to be core-js/stable and postmate imports inside your entry source JS file.

bavel.config.js 的内容:

module.exports = function (api) {
  api.cache(true);
  const presets = [
    [
      '@babel/preset-env',
      {
        corejs:"3",
        useBuiltIns: 'entry',
        targets: {
          browsers: [
            "edge >= 16",
            "safari >= 9",
            "firefox >= 57",
            "ie >= 11",
            "ios >= 9",
            "chrome >= 49"
          ]
        }
      }
    ]
  ];
  const plugins= [
      ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ];
  return {
    presets,
    plugins
  }
}

webpackconfig.js 的内容:

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            configFile: path.resolve(__dirname, 'babel.config.js'),
            compact: false,
            cacheDirectory: true,
            sourceMaps: false,
          },
        },
      },
    ],
  },
  devtool:"cheap-source-map",
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'shim.js',
  }
}

入口JS文件 src/index.js 的内容:

import 'core-js/stable';
window.Postmate = require('postmate/build/postmate.min.js');

// Postmate and rest of the code
...

它将生成:

dist/shim.js      641K
dist/shim.js.map  459K

您可以在以下的 IE 11 中进行测试: https://zikro.gr/dbg/so/61044894/.

You can test in IE 11 here: https://zikro.gr/dbg/so/61044894/.

这篇关于如何为IE11正确使用babel/corejs3/webpack?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-13 14:07
Powered by LMLPHP ©2024 zikro 0.037278