web-dev-qa-db-ja.com

IE11でbabel / corejs3 / webpackを正しく使用する方法

私の現在の設定（以下を参照）では、このエラーが発生します。

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

Symbol()_ ... : undefined}に基づいて掘り出そうとしましたが、明確な兆候が見つかりませんでした。

これは私の_.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_を除外していません。

これは私の_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に1つ持っていて、promiseは正常に完了しました。

javascriptwebpackinternet-explorer-11babeljscore-js
5
Rhangaun

インポートが不足している可能性があります。IE11のサポートの対象となる react-app-polyfills インポートを確認することをお勧めします-エラーメッセージはSymbolに関連しています。 core-js>=3は、IE11がcore-js/stableで必要とするすべてのものをインポートしなくなりました。これを書いている時点では、これで十分かもしれません：

// If  you need `fetch` or `Object.assign`
npm install whatwg-fetch object-assign

// Make sure we're in a Browser-like environment before importing polyfills
// This prevents `fetch()` from being imported in a Node test environment
if (typeof window !== 'undefined') {
  // fetch() polyfill for making API calls.
  require('whatwg-fetch');
}

// Object.assign() is commonly used with React.
// It will use the native implementation if it's present and isn't buggy.
Object.assign = require('object-assign');

/// This may rid you of your error message

// Support for...of (a commonly used syntax feature that requires Symbols)
require('core-js/features/symbol');
// Support iterable spread (...Set, ...Map)
require('core-js/features/array/from');

お役に立てれば

0
mfeineis