Webpack + Babel:找不到预设的"es2015"相对于目录

问题描述

我有一个使用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"
  }
}

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

My version of node is: v5.6.0My 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，并且您想安装dev依赖项，则可以使用:

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"相对于目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！