使用webpack和babel对第三方库进行转译 但是在ie10中报错

Question

使用webpack和babel对第三方库进行转译 但是在ie10中报错：（无法获取未定义或 null 引用的属性“toString”）,在其他高版本浏览器是正常运作的，希望大家指导指导

//webpack.config.js
const path = require('path');
// const glob=require('glob');

module.exports = {
//entry:glob.sync('./tinymce/*.js'),
  entry:'./src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode:'development',//打包为开发模式
  target: ['web', 'es5'],
  // externals: {//这个好像是不打包
  //   tinymce: 'tinymce',
  // },
  resolve: {
    // modules: [path.resolve(__dirname, 'tinymce'), 'node_modules'],
    alias: {
      'tinymce': '../tinymce',
    }
  },
  module:{
    rules:[
        {
            test:/\.js$/,
            exclude: /node_modules/,
            use:{
                loader:'babel-loader',
                options: {
                    presets: [
                        ['@babel/preset-env',{
                        targets: {
                          ie:'8',
                          edge: "17",
                          firefox: "60",
                          chrome: "67",
                          safari: "11.1",
                        },
                         useBuiltIns: "usage",
                        corejs:'3'
                      }]
                    ],
                    //plugins: ['@babel/plugin-transform-runtime']
                }
            }
        },
        {
          test:/\.css$/,
          use: ['style-loader', 'css-loader'],
        }
    ]
  }
};

//由于我没有把tinymce这个插件给放到node_modules下面，我直接在根目录复制了tinymce这个库

import 'tinymce'
import '../tinymce/themes/mobile/theme.js'
import '../tinymce/icons/default/index.js'

import '../tinymce/jquery.tinymce'

import "../tinymce/plugins/code"

import "../tinymce/plugins/table"

import "../tinymce/plugins/image"

import "../tinymce/plugins/preview"

import "../tinymce/plugins/fullscreen"

import '../tinymce/themes/silver'

import '../tinymce/plugins/advlist'
import '../tinymce/plugins/anchor'
import '../tinymce/plugins/autolink'
import '../tinymce/plugins/autoresize'
import '../tinymce/plugins/bbcode'
import '../tinymce/plugins/charmap'
import '../tinymce/plugins/code'
import '../tinymce/plugins/codesample'
import '../tinymce/plugins/colorpicker'
import '../tinymce/plugins/contextmenu'
import '../tinymce/plugins/directionality'
import '../tinymce/plugins/emoticons'
import '../tinymce/plugins/fullpage'
import '../tinymce/skins/ui/oxide/skin.min.css'
import '../tinymce/skins/ui/oxide/content.css'
import '../tinymce/skins/content/default/content.css'
tinymce.init({
    selector: '#mytextarea',
    // language: 'zh_CN',
    height: 300,
    directionality: 'ltr rtl',
    browser_spellcheck: true,
    contextmenu: false,
    plugins: [
      "advlist autolink lists link image charmap print preview anchor",
      "searchreplace visualblocks code fullscreen",
      "insertdatetime media table contextmenu paste imagetools wordcount",
      "code"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code",
});

Answer 1

【以下回答由 GPT 生成】

首先，要解决这个问题，我们需要确定错误是由于ES5不支持某些功能导致的。在这种情况下，我们可以尝试使用babel-polyfill来解决这个问题。

以下是一种可能的解决方案：

1. 首先，安装babel-polyfill：

shell npm install --save @babel/polyfill

1. 然后，在项目的入口文件（index.js）的开头，使用import引入babel-polyfill：

javascript import '@babel/polyfill'; import 'tinymce'; import '../tinymce/themes/mobile/theme.js'; import '../tinymce/icons/default/index.js'; import '../tinymce/jquery.tinymce'; import '../tinymce/plugins/code';

1. 修改webpack配置文件（webpack.config.js），添加babel-polyfill到entry配置项中：

```javascript const path = require('path');

module.exports = { entry: ['@babel/polyfill', './src/index.js'], output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), }, mode: 'development', target: ['web', 'es5'], resolve: { alias: { 'tinymce': '../tinymce', } }, module:{ rules:[ { test: /.js$/, exclude: /node_modules/, use:{ loader: 'babel-loader', options: { presets: [ ['@babel/preset-env',{ targets: { ie: '8', edge: "17", firefox: "60", chrome: "67", safari: "11.1", }, useBuiltIns: "usage", corejs:'3' }] ] } } }, { test: /.css$/, use: ['style-loader', 'css-loader'], } ] } }; ```

1. 最后，重新运行打包命令，然后在IE10中测试。应该不再出现错误。

请注意，这只是一种解决方案，并不代表一定能解决所有问题。如果问题仍然存在，可能需要进一步检查代码和配置文件，或者尝试其他解决方案。

希望这个解决方案对您有所帮助！如果您还有其他问题，请随时提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^