[英]Webpack + Babel: Couldn't find preset “es2015” relative to directory
我有一个使用 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"
}
}
我的node版本是:v5.6.0 我的npm版本是:3.6.0
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关于该位的更多信息。
npm install babel-preset-es2015
这有帮助吗?
当我从“/Users/username”目录中删除 .babelrc(隐藏)文件时,我解决了这个问题。
对我来说,我必须全局安装该软件包。
npm install babel-preset-es2015 --save -g
npm install babel-preset-es2015 babel-preset-stage-2 --save
它对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.