私はこのwebpack4/reactチュートリアルに従っています:
https://www.youtube.com/watch?v=deyxI-6C2u4
彼がnpmを実行する部分が始まるまで、私はそれを正確に追跡しました。違いは、彼のアプリが実行され、私のエラーが発生することです:
モジュール '@ babel/core'が見つかりません
完全なエラー:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\Users\joeyf\Desktop\Code\Github\webpack4-sample\node_modules\babel-loader\lib\index.js:5:15)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
@ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js main[2]
Babel-coreを再インストールしようとしましたが、まだ見つかりません。ここに私のpackage.jsonがあります:
{
"name": "webpack4-sample",
"version": "1.0.0",
"description": "A sample setup of Webpack4 with React and Babel",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "Joey Fenny",
"license": "ISC",
"dependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"babel-core": "^7.0.0-rc.4",
"babel-loader": "^8.0.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.6"
}
}
私のwebpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index_bundle.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: path.join(__dirname, '/node_modules'),
use: {
loader: 'babel-loader'
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
Gitリポジトリへのリンクは次のとおりです。
https://gitlab.com/jfny/webpack4-sample
誰が何が起こっているか知っていますか?ありがとう。
npm install @babel/core --save
を実行します。 babelはパッケージを変更したため、babel-core
は@babel/core
と同じではなくなります
最近のBabelのバージョン7へのアップグレードにより、ノードパッケージの名前が変更されました。
たとえば、Reactで動作させるには、npm install --save-dev @babel/core @babel/preset-env
とnpm install --save-dev @babel/preset-react
をインストールする必要があります。
次に、これらを。babelrcファイルで使用できます。
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
または、代替として、。babelrcがない場合、package.json:
...
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
},
"devDependencies": {
...
さらに詳しく知りたい場合は、この最近のページをご覧ください Webpack + Babel + React setup 。
babel-loader @ 8にはBabel 7.x(パッケージ '@ babel/core')が必要です。 Babel 6.x(「babel-core」)を使用する場合は、「babel-loader @ 7」をインストールする必要があります。
以下のコマンドを使用してこの問題を修正できます
npm install @babel/core --save
私の場合、私はbabel 6をアンインストールする必要がありました
npm uninstall --save-dev babel-cli babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-2 babel-register
そして、次にbabel 7を再インストールします
npm i --save-dev @babel/cli @babel/core @babel/node @babel/polyfill @babel/preset-env
そしてそれは私のために働いた。
babel-nodeとともに@ babel/coreを使用する場合:npm i @babel/core --save-dev
を使用して@ babel/coreをインストールしましたが、babel-nodeを使用しようとしても@ babel/coreパッケージが認識されず、アンインストールされました@ babel/coreとnpm i @babel/core --save
を使用して再度インストールすると、再び機能しました!