Webpack + Babel：找不到相对于目录的预设“es2015”

Posted 2023-02-22

【中文标题】Webpack + Babel：找不到相对于目录的预设“es2015”

【英文标题】：Webpack + Babel: Couldn't find preset "es2015" relative to directory

【发布时间】：2017-03-04 11:15:56

【问题描述】：

我有一个使用 Webpack 和 Babel 的 React 项目。当我在办公室计算机上创建它时，Webpack 运行良好。当我将项目克隆到我的个人计算机上时，它给出了以下错误：

ERROR in ./react_minesweeper.jsx
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/louisstephancruz/Desktop"
at /Users/louisstephancruz/Desktop/w6d5/minesweeper/node_modules/babel-core/lib/transformation/file/options/option-manager.js:298:19
at Array.map (native)
at OptionManager.resolvePresets (/Users/louisstephancruz/Desktop/w6d5/minesweeper/node_modules/babel-core/lib/transformation/file/options/option-manager.js:269:20)

这是我的webpack.config.js：

module.exports = 
  entry: './react_minesweeper.jsx',
  output: 
    path: './',
    filename: 'bundle.js',
  ,
  module: 
    loaders: [
      
        test: [/\.jsx?$/, /\.js?$/],
        exclude: /(node_modules)/,
        loader: 'babel',
        query: 
          presets: ['es2015', 'react']
        
      
    ]
  ,
  devtool: 'source-map',
  resolve: 
    extensions: ['', '.js', '.jsx' ]
  
;

这是我的package.json：

  "name": "minesweeper",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "babel": "^6.5.2",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  ,
  "dependencies": 
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  

我的节点版本是：v5.6.0 我的 npm 版本是：3.6.0

【问题讨论】：

如果有人问：我的个人电脑正在运行 El Capitan。 （我相信办公电脑也是。）

鉴于错误引用/Users/louisstephancruz/Desktop，您的家庭桌面中有/Users/louisstephancruz/Desktop/.babelrc 文件吗？如果是这样，这似乎会干扰您的项目，因为那会期望 node_modules 在 Desktop 中，而不是在 Desktop/w6d5/minesweeper/ 中。如果您删除 .babelrc ，则一切正常。

感谢@loganfsmyth 我得到了同样的错误，因为我的 .babelrc 错误地位于父目录中

【参考方案1】：

npm i 或 npm install

应该在你的 package.json 依赖和 dev 依赖中安装所有的包（只要你的NODE_ENV 环境变量不等于production）。

---

要检查您是否安装了特定的软件包，您可以这样做：

npm ls babel-preset-es2015

如果由于某种原因您的 NODE_ENV 是 production 并且您想安装可以使用的开发依赖项：

npm install --only=dev

相反，以下内容可用于正在处理已构建代码且不需要访问任何开发依赖项的生产机器上：

npm install --only=prod

---

我建议在你的 repo 的根目录中创建一个.babelrc，并包含以下内容：

"presets": [ "es2015", "react" ]

---

对于 webpack 配置，您可能需要指定一些其他选项：

 context: __dirname
, resolve:  root: __dirname, extensions: [ '.js', '.jsx', '.json' ] 

除了你的配置之外，这告诉 webpack 捆绑的根目录应该从哪里发生以及哪些文件扩展名被视为模块（你可以在 require / import 语句中省略哪些扩展名） .

我建议您查看 webpack 的 resolve.extensions 以了解有关该位的更多信息。

【讨论】：

你的 node 和 npm 版本是多少？ node --version, npm -v?

@LouisCruz 是什么样的文件？如果您不包含扩展名，您可能需要解决它

查看关于 webpack 中解析扩展的最新编辑，应该这样做。

该死的也修复了扩展问题！ @cchamberlain，谢谢！

npm ls babel-preset-es2015 是空的，所以 npm install babel-preset-es2015 --save-dev 解决了我的问题~

【参考方案2】：

npm install babel-preset-es2015

这有帮助吗？

【讨论】：

是的，我做到了。仅仅因为它在你的 package.json 中，并不意味着你已经安装了它。特别是因为它可以在一台计算机上运行，​​而不是在另一台计算机上运行。

你不需要 --save-dev 标志，它已经在 package.json 中了。

以防我对 npm 的理解有缺陷，我尝试使用这两种方法再次安装，但均未成功。感谢您的尝试！

只是确认一下，您在项目目录中，对吗？另外，您是否尝试过npm install，它应该安装列出的所有依赖项。

只是为了验证，你能运行npm ls吗？它是否显示所有开发依赖项都已安装？

【参考方案3】：

当我从“/Users/username”目录中删除 .babelrc（隐藏）文件时，我解决了这个问题。

【讨论】：

为什么我看起来 90% 的地方都说要添加一个 .babelrc 文件，而你似乎在说要删除它？？你删除它的理由是什么？

我认为这里的重点是 Alex 在他们的主目录（不是项目目录）中有一个 .babelrc，它与项目构建设置冲突。至少对我来说是这样。

同样，我在父目录中有一个隐藏的.babelrc，它对我来说也很糟糕......

【参考方案4】：

对我来说，我必须在全球范围内安装该软件包。

npm install babel-preset-es2015 --save -g

【参考方案5】：

npm install babel-preset-es2015 babel-preset-stage-2 --save

它对我有用。