Webpack - Babel错误-找不到与目录相关的预设"@babel/env“

Webpack是一个用于打包JavaScript模块的静态模块打包器。它可以将多个模块打包成一个或多个文件，以优化加载性能。Babel是一个用于将最新版本的JavaScript代码转换为可以在旧版浏览器或其他环境中运行的版本的工具。

当在Webpack中使用Babel时，有时可能会遇到一个错误，即找不到与目录相关的预设"@babel/env"。这是由于缺少相应的Babel预设包引起的，需要手动安装并配置相应的预设。

解决方法如下：

确保项目根目录下有一个名为package.json的文件。如果没有，可以通过运行npm init命令来创建一个新的package.json文件。
打开终端，进入项目根目录，并运行以下命令来安装"@babel/preset-env"预设包：

npm install --save-dev @babel/preset-env

打开项目根目录下的webpack.config.js文件（如果没有该文件，则需要创建），在其中的module.rules中添加以下配置：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

保存webpack.config.js文件，并重新运行Webpack构建命令。

这样，Webpack将会使用Babel来处理JavaScript文件，并使用"@babel/preset-env"预设包将最新的JavaScript代码转换为可以在目标环境中运行的代码。

推荐的腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云函数（SCF）：https://cloud.tencent.com/product/scf
云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云游戏联机解决方案（GSE）：https://cloud.tencent.com/product/gse

相关·内容

Flow 静态类型检查开发环境搭建

本文将详细介绍使用 Webpack、ESlint、Babel 与 Flow 集成的开发环境的构建过程。...而 @babel/preset-env 是一个智能预设，允许您使用最新的 JavaScript，而无需微观管理您的目标环境需要哪些语法转换（以及可选的浏览器polyfill）。...配置 ESlint 代码格式检查安装 ESlint 相关依赖： npm install --save-dev eslint eslint-loader babel-eslint 修改 webpack.config.js...这与 Babel 预设和插件运行顺序有关。 Babel 预设与插件运行顺序：插件在预设之前运行。插件从第一至最后顺序运行。预设顺序相反（从最后到第一）。...重要的是要记住，对于预设，顺序是相反的。

1.1K2 0

使用Babel将es6转换es5

大家好，又见面了，我是你们的朋友全栈君目录 Babel是什么?...添加配置文件 webpack.config.js 3) 修改package.json 4)打包拓展 npm中 save与 save-dev区别 ---- Babel是什么?...o index.js 整个目录转码 –out-dir 或 -d 参数指定输出目录 $ babel src -d lib 配置文件 Babel的配置文件是.babelrc,存放在项目的根目录下。...–save-dev 不会过时的转码规则 $npm install babel-preset-env –save-dev 最后将这些规则加入.babelrc.例如将最新转码规则加入 {“presets...配置 1) 安装babel-loader与babel-core $ npm install babel-core babel-loader –save-dev 2)安装预设 $ npm isntall

8233 0

webpack构建自定义react应用

在上一篇文章中我们用webpack与webpack-cli搭建了最简单的前端应用，通常在项目中我们会用vue或者react,我们看下如何利用我们自己搭的工程来适配react 正文开始......所以我们需要知道一个react项目需要哪些插件的前提条件,本文主要参考从头开始打造工具链[1] 安装babel相关插件 npm i @babel/core @babel/cli @babel/preset-env...@babel/preset-react --save 其中babel/core就是能将代码进行转换，@babel/cli允许命令行编译文件，babel/preset-env与@babel/preset-react...[2]都是预设环境，把一些高级语法转换成es5 安装好相关插件后，我们需要在根目录中创建一个.babelrc来让babel通知那两个预设的两个插件生效 // .babelrc { "presets"...: ["@babel/env", "@babel/preset-react] } 接下来我们需要安装在react中的支持的jsx，主要依赖babel-loader来编译jsx npm i babel-loader

5152 0

一张图教你快速玩转vue-cli3

这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀例如： // .browserslistrc...// subpage: 'src/subpage/main.js' }, } 6.如何配置自定义环境变量你可以替换你的项目根目录中的下列文件来指定环境变量： .env...，变量名因以 VUE_APP_开头，如下可获取定义的环境变量： console.log(process.env.VUE_APP_SECRET) 7.如何在vue.config.js定制自己的webpack...我们可以使用cli支持的链式调用，或者自定义调用： // vue-cli内部webpack配置 chainWebpack: config => { // 设置快捷目录别名.../usr/bin/env sh # 当发生错误时中止脚本 set -e # 构建 npm run build # cd 到构建输出的目录 cd dist git init git add -A

2K1 0

一张图教你快速玩转vue-cli3

这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀例如： // .browserslistrc...// subpage: 'src/subpage/main.js' }, } 6.如何配置自定义环境变量你可以替换你的项目根目录中的下列文件来指定环境变量： .env...，变量名因以 VUEAPP开头，如下可获取定义的环境变量： console.log(process.env.VUE_APP_SECRET) 7.如何在vue.config.js定制自己的webpack...我们可以使用cli支持的链式调用，或者自定义调用： // vue-cli内部webpack配置 chainWebpack: config => { // 设置快捷目录别名.../usr/bin/env sh # 当发生错误时中止脚本 set -e # 构建 npm run build # cd 到构建输出的目录 cd dist git init git add -A

3K8 0

从0到1 Webpack搭建Vue3开发、生产环境

起步创建项目目录 mkdir webpack-vue3-demo 初始化 package.json npm init -y 参考文档安装 webpack webpack-cli webpack-dev-server...mkdir build cd build touch webpack.base.js touch webpack.dev.js touch webpack.prod.js 如果执行第三个命名报如下错误...npm install @babel/core @babel/preset-env babel-loader --save-dev 配置babel-loader // webpack.base.js...} ] } 创建babel配置文件设置预设配置文件参考文档预设配置项参考文档 // babel.config.js module.exports = { presets: [...[ "@babel/preset-env", { useBuiltIns: "usage", corejs: "3.26" } ] ] } 需要安装corejs

1.1K3 0

TypeScript与Babel、webpack的关系以及IDE对TS的类型检查

如果源码是这种写法，经过 babel 之后就会提示语法错误。但最近的 JS 提案中已经允许了这种新的写法(让代码 diff 更加清晰)。...preset开头的就是预置组件包合集，其中@babel/preset-env表示使用了可以根据实际的浏览器运行环境，会选择相关的转义插件包，通过配置得知目标环境的特点只做必要的转换。...-D webpack webpack-cli yarn add -D babel-loader yarn add -D @babel/core yarn add -D @babel/preset-env.../node_modules/@babel/parser/lib/index.js:72:32) 出现了语法的错误，报错的主要原因在于没有把整个babel处理ts的链路打通。...', }, }, // ... ... }; tsc与babel编译的差异现在我们先编写一个简单错误代码： interface User { name: string;

5753 0

时下最流行前端构建工具Webpack 入门总结

babel 有丰富的预设和插件，babel 的配置可以直接写到 options 里或者单独写道配置文件里。...babel/core @babel/preset-env webpack 然后，我们需要建立一个 Babel 配置文件来指定编译的规则。...Babel 配置里的两大核心：插件数组(plugins) 和预设数组(presets)。 Babel 的预设（preset）可以被看作是一组 Babel 插件的集合，由一系列插件组成。...常用预设： @babel/preset-env ES2015+ 语法 @babel/preset-typescript TypeScript @babel/preset-react... React @babel/preset-flow Flow 插件和预设的执行顺序：插件比预设先执行插件执行顺序是插件数组从前向后执行预设执行顺序是预设数组从后向前执行

1.1K3 0

入门babel，我们需要了解些什么

@babel/preset-env提供了一种智能的预设，根据配置的options来决定支持哪些能力。...@babel/preset-env还有一些配置，自己慢慢去折腾吧…… stage-x stage-x描述的是ECMA标准相关的内容。...babel@7相关的包命名都改了，基本是@babel/plugin-xxx, @babel/preset-xxx这种形式。这是开发插件体系时一个比较标准的命名和目录组织规范。...…… 结语本人只是对babel有个粗略的认识，所以这是一篇babel入门的简单介绍，并没有提到深入的内容，可能也存在错误之处。...自己翻来覆去也看过好几遍babel的文档了，一直觉得收获不大，也没理解到什么东西，在与webpack配合使用的过程中，还是有很多疑惑没搞懂的。其实错在自己不该在复杂的项目中直接去实践。

7122 0

从0到1搭建webpack2+vue2自定义模板详细教程

Babel 提供了多个版本的官方预设： env es2015 es2016 es2017 latest (deprecated in favor of env) babel-preset-env...为了启用预设，必须在.babelrc文件中定义预设的相关配置，这里参考vue-cli 模板中的配置。...为了启用预设，必须在.babelrc文件中定义预设的相关配置，这里参考vue-cli 模板中的配置。...Babel 提供了多个版本的官方预设： env es2015 es2016 es2017 latest (deprecated in favor of env) babel-preset-env babel-preset-env...为了启用预设，必须在.babelrc文件中定义预设的相关配置，这里参考vue-cli 模板中的配置。

4.7K2 0

吐血整理的webpack入门知识及常用loader和plugin

babel有丰富的预设和插件，babel的配置可以直接写到options里或者单独写道配置文件里。.../core @babel/preset-env webpack然后，我们需要建立一个Babel配置文件来指定编译的规则。...Babel配置里的两大核心：插件数组(plugins) 和预设数组(presets)。Babel 的预设（preset）可以被看作是一组Babel插件的集合，由一系列插件组成。...**常用预设：**@babel/preset-env ES2015+ 语法@babel/preset-typescript TypeScript@babel/preset-react... React@babel/preset-flow Flow**插件和预设的执行顺序：**插件比预设先执行插件执行顺序是插件数组从前向后执行预设执行顺序是预设数组从后向前执行

1.5K6 2

babel 入门使用 (babel 7.4.0)

官网安装 // babel 核心 yarn add @babel/core // babel 预设插件 yarn add @babel/preset-env // babel 命令行 yarn add...{ presets: [ "@babel/env" ], plugins: [] } 执行编译 yarn babel src -d lib // babel [需要编译的文件或目录...] -d [指定输出目录] // 该命令的意思是，将src下所有的js文件编译后，输出到lib目录下，如果lib不存在，将新建该目录。...推荐使用babel.config.js 具有更灵活的配置方式 plugins配置基本概念 plugins babel通过使用插件处理不同的编译需求，类似webpack的处理方式, 插件将在presets...presets配置，方式与plugins相同预设名 { "presets": [ "@org/babel-preset-name", ] } 短名

1.3K4 0

vue.config.js 配置文件

// const path = require('path'); module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production...注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。提示请始终使用 outputDir 而不要修改 webpack 的 output.path。.../subpage.html` // 并且如果找不到的话，就回退到 `public/index.html`。...和 .babelrc 或 package.json 中的 babel 字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules 内部的依赖...所有的 Vue CLI 应用都使用 @vue/babel-preset-app，它包含了 babel-preset-env、JSX 支持以及为最小化包体积优化过的配置。

2.8K0 0

webpack入门级 - 从0开始搭建单页项目配置

1.5K1 0

webpack5基础

处理图片资源通过file-loader和url-loader webpack5已经将两个loader的功能内置到webpack里，只需要简单配置即可处理图片资源修改输出文件目录 output: {...module.exports = { presets:[] //预设，babel插件。...扩展babel功能 } babel-loader 安装 pnpm i babel-loader -D pnpm i @babel/core -D pnpm install -D babel-preset-env...loader: "babel-loader", }, 创建babel.config.js module.exports = { // 智能预设：能够编译ES6语法 presets:...open:true, //是否自动打开浏览器 }, 启动指令变更npx webpack serve 4.生产模式相关配置将生产模式的配置与开发模式的配置分开，创建文件夹config，将webpack.config.js

2162 0

写一个自定义loader，看完，就会

webpack的loader本质上是一个导出的函数，loader runner[1]会调用该函数，在loader函数内部，this的上下文指向是webpack，通常loader内部返回的是一个string...当前loader返回的结果，会传递给下一个执行的loader 今天一起学习一下webpack5中的loader,让我们进一步加深对webpack的理解正文开始......首先我们要确定，babel转换es6,我们需要安装依赖两个插件，一个是@babel/core核心插件，另一个是@babel/preset-env预设插件修改rules,我们现在使用一个test-babel-loader...', options: { presets: ['@babel/preset-env'] // 预设 }...server --port=8081", "build": "webpack" }, 我们执行npm run build test-loader与test-babel-loader都会执行

3651 0

Babel6

插件预设在配置文件中指定和维护大量的转换器信息可能会导致大量的工作，因此Babel 6引入了插件预设值的概念，可以用于组织相似的插件。三、配置 1....运行Babel时，首先会查找当前目录下是否有.babelrc文件；如果不存在，将会依次查找上级目录是否有.babelrc文件或package.json中是否具有"babel": {}哈希值。...手动配置这些单一特性非常的繁琐，这只适用于你仅仅使用了某几个ES6、ES7的新特性，如果不是这种情况，你可以直接安装插件的预设。（3）env选项可以使用env选项针对特定环境进行设置。...babel-node test.js 方式三：babel 将源文件按照.bablerc设置要求转换成相关内容保存到其他文件中。...使用webpack配置后，无需.babelrc文件！

1K4 1

Webpack入门到精通(AST、Babel、依赖)

share_token=68a0b777-70c1-4021-a894-3ed9f8c107e9 ❞ babel与AST 初始化项目 mkdir webpack-study cd webpack-study...@babel/parser 在babel中编译器插件是@babel/parser，其作用就是将源码转换为AST， @babel/preset-env （预设(preset)——babel的插件套装）那么问题来了新语法新特性那么多...当然不是，babel已经预设了几套插件，将最新的语法进行转换，可以使用在不同的环境中，如下： @babel/preset-env @babel/preset-flow @babel/preset-react...写入到依赖中去 if (path.node.type === 'ImportDeclaration') { //当前文件的上一级目录与获取到当前文件的依赖文件进行拼接。...code2 工具相关 babel 可以把高级代码转换成ES5代码 @babel/parser @babel/traverse @babel/generate @babel/core @babel-preset-env

5521 0

【Webpack】1080- Webpack入门到精通(AST、Babel、依赖)

5892 0

使用 Webpack 4 和 Babel 7 从头开始创建 React 应用程序

，@babel/preset-env，@babel/preset-react 作为 dev 依赖项 npm i babel-loader@8 @babel/core @babel/preset-env...，将 ES6 代码转换为 ES5 @babel/preset-env：即 babel-preset-env，根据您要支持的浏览器，决定使用哪些 transformations / plugins 和 polyfills...，例如为旧浏览器提供现代浏览器的新特性 @babel/preset-react：即 babel-preset-react，针对所有 React 插件的 Babel 预设，例如将 JSX 转换为函数 **...] } }; { "presets": ["@babel/preset-env", "@babel/preset-react"] } 4.在 src 目录下创建 index.js 文件渲染组件...3.使用 CSS 模块化 CSS 模块化将类名的作用域可以仅针对相关组件 ... module.exports = { module: { rules: [ ...

8692 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Webpack - Babel错误-找不到与目录相关的预设"@babel/env“

相关·内容

Flow 静态类型检查开发环境搭建

使用Babel将es6转换es5

webpack构建自定义react应用

一张图教你快速玩转vue-cli3

一张图教你快速玩转vue-cli3

从0到1 Webpack搭建Vue3开发、生产环境

TypeScript与Babel、webpack的关系以及IDE对TS的类型检查

时下最流行前端构建工具Webpack 入门总结

入门babel，我们需要了解些什么

从0到1搭建webpack2+vue2自定义模板详细教程

吐血整理的webpack入门知识及常用loader和plugin

babel 入门使用 (babel 7.4.0)

vue.config.js 配置文件

webpack入门级 - 从0开始搭建单页项目配置

webpack5基础

写一个自定义loader，看完，就会

Babel6

Webpack入门到精通(AST、Babel、依赖)

【Webpack】1080- Webpack入门到精通(AST、Babel、依赖)

使用 Webpack 4 和 Babel 7 从头开始创建 React 应用程序

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐