webpack打包时babel-core提示版本错误

最新推荐文章于 2024-03-30 13:18:27 发布
最新推荐文章于 2024-03-30 13:18:27 发布
阅读量1.2k 收藏
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42821179/article/details/86149611
版权

webpack打包时babel-core提示版本错误

在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core’错误
由于babel-loader的版本不一样，版本到了8.x导致自动打包时提示Cannot find module '@babel/core’
之后安装babel-loader@7.1.5，回退到7.x版本，打包成功

倪好坏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
babel-loader与babel-core的版本对应关系
weixin_30511107的博客
08-31 2916
babel-loader 8.x对应babel-core 7.xbabel-loader 7.x对应babel-core 6.x如何解决1、 卸载旧的babel-corenpm un babel-core2、 安装新的babel-corenpm i -D @babel/core3、 卸载旧的babel-presetnpm un babel-preset-envnpm un babel-p...
vue2 babel-core 6.x 升级到 7.x
wolzh88的博客
05-17 2866
一、为什么要升级 因为要使用新特性的时候发现 **?.**可选链操作符, **??**空值合并操作符, **??=**空值合并操作符等 二、如何升级 1、 package.json 中 babel 7 以下的全部删除 2、删除 package.json文件 3、删除node_modules文件夹 执行命令: npm install -D '@babel/core' '@babel/cli' '@babel/preset-env' '@babel/plugin-transform-runtim
【日常记录】【JS】@babel/core @babel/polyfill @babel/preset-env core-js 介绍
最新发布
呆呆狗
03-30 1532
【日常记录】【JS】@babel/core @babel/polyfill @babel/preset-env core-js 介绍
Babel 各版本解释
月光恋九霄的博客
04-26 1925
Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译， 也被称为转换编译。 通俗的说，就是我们可以用ES6, ES7等来编写代码，Babel会把他们统统转为ES5。 babel-core调用Babel的API进行转码 babel-loader babel-preset-es2015用于解析...
webpack 大套餐和配置,babel版本和压缩的小问题
A13330069275的博客
10-23 1452
最好是html文件在最外层，js和css写在src里面，这样就免得配置输入输出 ①之前一直因为babel-loader版本不对一直报错，Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: Cannot read property 'bindings' of null，看了各种博客，还是报错...
webpack-vue:基于webpack4+ babel7+搭建的前端打包配置环境
04-28
从零开始配置webapck打包环境设置打包目标浏览器创建.browserslistrc文件编辑.browserslistrc文件last 2 versions> 2%.js文件打包配置安装@babel/core @babel/preset-ent @babel-transfrom-runtime @babel-loader @...
webpack-base-demo2.zip
06-24
cnpm i --save-dev babel-loader @babel/core @babel/preset-env （2）babel-polyfill：低版本浏览器中的不支持API，例如findIndex cnpm i --save-dev babel-polyfill （3）babel-plugin-transform-runtime: 解决...
babel-polyfill-silencer:Webpack使用的微库，可避免babel隐式导入core-js polyfills
05-23
已淘汰babel-polyfill-silencer Webpack使用的微库，可避免babel隐式导入core-js polyfills用法在您的客户端代码中，在第一行使用require('babel-polyfill-silencer') 。 仅当您要在异步加载Symbol polyfill时避免...
lyh-pages:基于webpack4打包多页应用
05-26
vue-routernpm install // 安装依赖npm run dev // 开发环境npm run build // 生产环境文档演示使用命令行创建npm install lyhs-cli -glyh create xxx使用依赖介绍(后续持续更新)@babel/core,@babel/preset-env,...
webpack-mvc 传统多页面组件化开发详解
11-28
最近有一个项目，还是使用的传统 MVC 模式开发，完全基于jQuery，使用了基于java模板引擎velocity，页面中嵌入了大量java语法，使得前后端分离不彻底，工程打包上线... @babel/core，@babel/preset-env，babel-loader
Cannot find module '@babel/core'
yudldl的博客
09-27 5006
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'. 这个是由于babel升级了一个大版本，已经到7.X了， 安装了  babel-loader@8 需要 ...
babel-loader和webpack版本不一致，导致项目启动失败
xiao白的博客
09-26 5148
使用create-react-app脚手架创建好一个项目之后，我的项目名称是my-react，在项目下使用npm start启动程序，但是在这一步出现错误 意思是说用create-react-app创建项目的时候所用到的babel-loader依赖是8.0.6版本的，但是在我所创建项目的node_modules下的babel-loader版本是7.1.5的版本。所以我要把版本升级才可以启动项...
npm install 报错没有匹配版本：No matching version found for
热门推荐
邪人君子的博客
03-17 12万+
第一种 问题描述 PS E:\myWork\AHNX_PC\paybank> npm install vue-drag-verify npm ERR! code ETARGET npm ERR! notarget No matching version found for vue-drag-verify@^4.7.0. npm ERR! notarget In most cases you ...
[坑003]babel-loader和babel-core安装问题
3叉树先生的博客
10-04 1万+
0x00错误描述 Error: Cannot find module '@babel/core’ 0x01产生的原因 babel-loader和babel-core版本不对应所产生的， babel-loader 8.x对应babel-core 7.x babel-loader 7.x对应babel-core 6.x 刚一开始我一看到cannot find module,第一条件反射就认为我自...
解决npm安装错误:No matching version found for @babel/parser^@7.7.4
qq_34721292的博客
11-26 3万+
在使用命令：npm install -g @vue/cli 安装最新版本的vue-cli时出现错误 错误提示找不到@babel/parser^@7.7.4 版本的 我们进入：https://www.npmjs.com/package/@babel/parser 查看有没有该版本的 点击 Versions 进入如下页面： 这里发现是有该版本的 解决方法： 如果在npm官网找到了这个版本，那么...
npm 使用时的一些错误解决收集
学无止境! 无休无止!
03-25 5546
这个原因是在当前目录下package.json文件里边的这个xxxxxxx包在npm上边找不到相应版本才行。删除即可。或者知道包的地址手动安装也行。安装完后在执行npm install就行了 ...
关于`babel-loader`和`babel-core`版本兼容性问题
小方块的世界
03-05 4160
安装babel-loader和babel-core出现问题 1.1 安装babel的转换工具包： npm i babel-core babel-loader babel-plugin-transform-runtime -D 1.2 安装完成后package.json中显示： “dependencies”: { “babel-core”: “^6.26.3”, “babel-loader”: ...
babel版本不兼容问题
impQAQ的博客
03-02 1002
报错如下： Plugin/Preset files are not allowed to export objects, only functions. 原因：babel版本冲突 依赖包不兼容 解决方案： 1.卸载当前版本babel 2.手动安装如下版本 配置： 1.webpack.config.js中 module:{ rules:[ { test:/(\.jsx|\.js)$/, use:{ loader:"babel-loader
webpack3 搭建babel+jsx
05-25
首先，你需要安装Webpack和Babel的相关依赖包。 ``` npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev ``` 接下来，在根目录下创建一个`webpack.config.js`文件，配置Webpack和Babel的相关设置。 ``` const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } } ] } }; ``` 其中，`entry`指定了入口文件，`output`指定了打包后的输出路径和文件名。`module`中的`rules`是用来设置Webpack对不同类型的文件进行处理的规则。这里我们使用`babel-loader`来处理`.jsx`文件，将其转换为浏览器可读的JavaScript文件。 接下来，在`src`目录下创建一个`index.js`文件，编写一些JSX代码。 ``` import React from 'react'; import ReactDOM from 'react-dom'; const App = () => <div>Hello World!</div>; ReactDOM.render(<App />, document.getElementById('root')); ``` 最后，在`index.html`中引入打包后的`bundle.js`文件，并在页面中添加一个`id`为`root`的`div`元素。 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack + Babel + JSX Demo</title> </head> <body> <div id="root"></div> <script src="./dist/bundle.js"></script> </body> </html> ``` 现在，运行`webpack`命令进行打包，打开`index.html`就可以看到页面中显示了`Hello World!`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值