Webpack + Babel:找不到预设“es2015"；相对于目录 [英] Webpack + Babel: Couldn't find preset "es2015" relative to directory

问题描述

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

I have a React project using Webpack and Babel. When I created it on an office computer, the Webpack ran fine. When I cloned the project onto my personal computer, it gave the following error:

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"
  }
}

我的node版本是:v5.6.0我的npm版本是:3.6.0

My version of node is: v5.6.0 My version of npm is: 3.6.0

推荐答案

npm i 或 npm install

应该安装 package.json 依赖项和 dev 依赖项中的所有包(只要您的 NODE_ENV 环境变量不等于 production).

should install all the packages in your package.json dependencies and dev dependencies (so long as your NODE_ENV environment variable does not equal production).

要检查您是否安装了特定的软件包，您可以执行以下操作:

To check if you have a particular package installed you may do:

npm ls babel-preset-es2015

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

If for some reason your NODE_ENV is production and you would like to install dev dependencies you can use:

npm install --only=dev

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

Conversely, the following may be used on production machines that are dealing with already built code and do not need access to any development dependencies:

npm install --only=prod

我建议在您的存储库的根目录中创建一个 .babelrc 并包含以下内容:

I'd recommend creating a .babelrc in the root of your repo with the following content:

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

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

For the webpack config you may want to specify some other options:

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

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

in addition to the rest of your configuration, this tells webpack where the root directory of the bundling should take place from and what file extensions to treat as modules (which extensions you can omit in require / import statements).

我建议查看 webpack 的 resolve.extensions 以了解更多信息那个位的信息.

I'd recommend checking out webpack's resolve.extensions for more information on that bit.

这篇关于Webpack + Babel:找不到预设“es2015"；相对于目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！