vuepress 项目支持ie运行

支持ie,就是js语法转换问题(es6 => es5),需要babel-loader, 所以需要修改webpack配置

在config.js里添加配置:

configureWebpack: (config, isServer) => {
	if(!isServer) {
		config.module.rules.push({
			test: /\.js$/,
			loader: 'babel-loader',
			options: {
				presets: ['@babel/preset-env']
			}
		});
		//添加polyfill
		const file = config.entry.app[0];
		//此处也可用@babel/polyfill (应该会稍微新一点,支持的语法多点,因为体积好像大点)
		config.entry.app = ['babel-polyfill', file]
	}
}

然后把用到的插件安装一下:npm i babel-loader '@babel/core' '@babel/preset-env' babel-polyfill -D

通过查资料,发现上边所述配置已经过时了,通过详细配置@babel/preset-env,可以实现按需引入,
大致是这么写:

test: /.js$/i,
exclude: /node_module/,
use: {
    loader: 'babel-loader',
    options: {
        presets: [
            [
                '@babel/preset-env',
                {
                    useBuiltIns: 'usage',
                    corejs: 3
                }
            ]
        ],
    }
}

但是我用到vuepress里报错,看报错大概原因是,exclude: /node_module/, 这个配置,如果用了这个配置,那么依然会有语法没有被转换成功,去掉这个配置,会导致/node_modules/里的代码在转换时报错

具体可参考:https://blog.csdn.net/weixin_50794208/article/details/130830275
https://www.cnblogs.com/lijun12138/p/16163421.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值