webpack4.0 babel配置遇到的问题

babel配置
babel版本升级到8.x之后发现出现了很多问题.
首先需要安装

"@babel/core": "^7.1.2",
"@babel/plugin-transform-object-assign": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/runtime": "^7.1.2",
"babel-loader": "^8.0.4"

因为babel8.x插件依赖这些插件.
因为我的项目需要兼容IE8 所以我的babel-loader 配置如下

{test: /\.js$/,include: dirVars.srcRootDir,loader: 'babel-loader',options: {presets: [["@babel/preset-env",{"targets": {"browsers": ["ie >= 8"]},//"useBuiltIns": 'usage',"modules": "commonjs"}]],cacheDirectory: true,plugins: ['@babel/plugin-transform-runtime', "@babel/plugin-transform-object-assign"]}}

打包之后发现我的项目出错了,因为项目里有个js用了Object.assign()方法所有报这个方法的错误.
以前webpack3 配置babel plugins: ['transform-runtime'],当时babel版本6.x直接就会转义这个方法.所以不会报错.
现在babel8.x 配置babel plugins: ['@babel/plugin-transform-object-assign']无效报错.
后来google后查找,发现了2种好的解决办法
第一种办法先安装"@babel/polyfill": "^7.0.0",
babel-loader 加配置"useBuiltIns": 'usage'
"useBuiltIns": 'usage' 的意思是对应的环境自动替换为所需的 polyfill。
详情看这篇文章https://juejin.im/entry/596309365188252ec3400aaf
这篇文章会介绍为什么不直接引入babel/polyfill.
第二种办法用@babel/plugin-transform-object-assign插件.
配置完成后,运行demo并且报错
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
网上解决方法如下:
点开错误的文件，标注错误的地方是这样的一段代码：
import {normalTime} from './timeFormat';
module.exports={
　　normalTime
};
就是module.exports;
百度查不到，google一查果然有。
原因是：The code above is ok. You can mix require and export. You can‘t mix import and module.exports.
翻译过来就是说，代码没毛病，在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。
因为webpack 中不允许混用import和module.exports,
解决办法就是统一改成ES6的方式编写即可.
我的解决办法:
babel-loder配置加一行代码"modules": "commonjs"
这是因为这个配置环境下module 类型需要统一成一种,加这行代码后就搞定,还是可以随意用,并转义成功.

转载于:https://www.cnblogs.com/chengfeng6/p/9813024.html

webpack4.0 babel配置遇到的问题相关推荐

Webpack4.0 升级配置
本文首发于 dawei.lv 本文基于 webpack 4.8.1 吐槽 webpack 彪版本号的速度真是飞快,4.0 发布没多久上去看的时候才 4.1.*,现在已经刷到 4.8.1 了,给人一种& ...
webpack4.0配置记录（2）
接上一篇webpack4.0配置记录(1),继续记录学习webpack配置. 定义环境变量 new Webpack.DefinePlugin({//用来定义全局环境变量DEV:JSON.stringi ...
史上最走心的Webpack4.0中级教程——配置之外你应该知道事
[摘要] <webpack4.0各个击破系列>适合不满足于只会配置webpack但一时间又看不懂源码的中级读者.我没法保证这个系列是最好的,但至少能保证每一篇博文都跟那些Ctrl+C和Ct ...
webpack4.0打包优化策略(二)
打包优化策略 webpack4.0打包优化策略(一) webpack4.0打包优化策略(二) webpack4.0打包优化策略(三) 区分开发和生产环境通常我们在开发网页时需要区分构建环境开发环境 ...
webpack4.0各个击破（6）—— Loader篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
webpack4.0各个击破（4）—— Javascript splitChunk
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
Webpack4.0各个击破（6）loader篇
Webpack4.0各个击破(6)loader篇一. loader综述二. 如何写一个loader 三. loader的编译器本质 [参考] 一. loader综述 loader是webpack的 ...
webpack4.0 CheatSheet
还在为webpack的配置而烦恼吗?这里有一份webpack从简易到高级版本的配置.还附赠配置地址,你想要吗?不,你不想.老老实实自己配置去吧. 压箱底的笔记而已,大家看看乐乐就好了,这是笔者为了练习 ...
webpack4.0各个击破（2）—— CSS篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

webpack4.0 babel配置遇到的问题

webpack4.0 babel配置遇到的问题相关推荐

最新文章

热门文章