webpack 打包 import 这种方式的代码，如何兼容ie8？

Question

有个问题想请教各位大神，知道的大佬请不吝赐教，万分感谢！

• webpack 中 使用 import 这种方法，打包后的文件，无法在ie8下运行（其他版本没试过）。谷歌等现代浏览器正常

• 报错：对象不支持 defineProperty 属性或方法

• 代码本身就是几个简单的变量，不存在兼容问题

但是使用 require 这种方法打包后的文件，可以在ie下运行。

使用import这种方式，怎么让打包后的代码能在id8下运行？
使用import这种方式，怎么让打包后的代码能在id8下运行？

这是我的 webpack.config.js

const path = require('path')

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

var pkg = require('./package.json');

var webpack = require('webpack')

const isLog = false

module.exports = {

    entry: {

        ['bestime']: './src/js/bestime/bestime.js',

        ['test']: './src/js/test.js'

    },

    output: {

        filename: `js/[name]/[name].${pkg.version}.min.js`,

        path: path.resolve(__dirname, 'dist')

    },

    //插件

    plugins: [

        new UglifyJSPlugin({

            uglifyOptions: {

                ie8: true,

                ecma: 5,

                warnings: false,

                output: {

                    beautify: false

                }

            }

        })

    ],

    module: {

        rules: [

            {

                test: /\.js$/,

                exclude:/(node_modules|bower_components)/,

                use: {

                    loader: 'babel-loader'

                }

            }

        ]

    }

}

.babellrc

{

  "presets": [

      ["es2015", {"modules": false}]

  ]

}

package.json

 "devDependencies": {

    "babel-loader": "^7.1.2",

    "babel-preset-es2015": "^6.24.1",

    "babel-core": "^6.26.0",

    "uglifyjs-webpack-plugin": "^1.1.6"

  }

Answer 1

发现其实 babel 转化是会生成 defineProperty。presets 试试配置为这样呢presets: [ ['es2015', {"loose": true}] ]。

Answer 2

webpack打包都会把import转为自己的webpack require才对，你看看输出错误是因为import吗？

Answer 3

module:false改成别的。让babel处理import语法试试。哦 对了 你可以试试rollup

Answer 4

export会被转成defineProperty，你看看是不是这个原因导致的const Test = {};export default Test;// 改成module.exports = Test;