Error: Cannot find module 'babel-preset-env' - Did you mean "@babel/env"?
Error: Cannot find module 'babel-preset-env' - Did you mean "@babel/env"?
我被要求检查我们的应用程序并更新所有框架，因为它非常过时，其中一件事是更新 babel，现在 package.json 中的一个脚本是：
"compile": "babel --presets es2015 -d /tests common_scripts/",
但在网上看到我看到 babel --presets es2015 应该替换为 @babel/preset-env 我做了，我试着像这样更新脚本：
"compile": "babel --presets=env -d /tests common_scripts/"
然而，当我 运行 现在我收到错误：
{ Error: Cannot find module 'babel-preset-env'
- Did you mean "@babel/env"?
我不确定为什么，也看不出哪里出错了。
我的package.json是这样的：
{
"main": "index.js",
"scripts": {
"compile": "babel --presets=env -d /tests common_scripts/",
"test": "npm run compile && mocha --require @babel/core/register jsdom-global/register common_scripts/**/*tests.js Areas/Gdpr/DataMappingApp/**/*tests.js Areas/Gdpr/GdprListAdminApp/**/*tests.js Areas/Gdpr/scripts/*.tests.js Areas/Support/GridColumnsAdminApp/**/*tests.js --reporter spec",
"buildDev": "npm run unsetReadOnly && webpack --env NODE_ENV=local && ECHO Completed at %TIME% ",
"buildDevB": "npm run unsetReadOnly && webpack --env NODE_ENV=local && ECHO Completed at %TIME% && echo \u0007 ",
"buildProd": "npm run unsetReadOnly",
"lint": "eslint Areas/Gdpr/DataMappingApp/** Areas/Gdpr/GdprListAdminApp/** Areas/Support/GridColumnsAdminApp/** Areas/Gdpr/SarApp/** common_scripts/**",
"unsetReadOnly": "attrib -R Content\kendo\2017.1.223\Bootstrap\*.png /S",
"bell": "echo \u0007",
"preinstall": "npx npm-force-resolutions"
},
"author": "BusinessPort",
"license": "ISC",
"resolutions": {
"js-yaml": "^3.11.3",
"is-svg": "^4.2.2"
},
"devDependencies": {
"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.8",
"@babel/node": "^7.16.8",
"@babel/plugin-proposal-object-rest-spread": "7.17.3",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"babel-eslint": "^8.2.3",
"babel-loader": "^8.2.4",
"babel-plugin-es6-promise": "^1.1.1",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"chai": "^4.1.2",
"css-loader": "^6.7.1",
"eslint": "^8.12.0",
"eslint-import-resolver-babel-module": "^4.0.0",
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-react": "^7.7.0",
"file-loader": "^6.2.0",
"jsdom": "^11.10.0",
"jsdom-global": "^3.0.2",
"mini-css-extract-plugin": "2.4.0",
"mocha": "^9.2.2",
"node": "^9.8.0",
"script-loader": "^0.7.2",
"source-map-support": "0.4.3",
"style-loader": "^0.20.3",
"ts-loader": "^3.5.0",
"typescript": "^2.6.2",
"url-loader": "^4.1.1",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2"
},
"dependencies": {
"@popperjs/core": "^2.11.4",
"@progress/kendo-data-query": "^1.2.2",
"@progress/kendo-dateinputs-react-wrapper": "^2018.2.620",
"@progress/kendo-dropdowns-react-wrapper": "^2018.1.221",
"@progress/kendo-grid-react-wrapper": "^2018.1.221",
"@progress/kendo-react-dropdowns": "^0.5.1",
"@progress/kendo-theme-bootstrap": "^5.2.0",
"@progress/kendo-theme-default": "^2.50.0",
"@progress/kendo-ui": "^2018.1.411",
"@progress/kendo-validator-react-wrapper": "^2018.1.221",
"@progress/kendo-window-react-wrapper": "^2018.1.221",
"acorn": "^8.7.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^5.1.3",
"braces": "^3.0.2",
"es6-promise": "^4.2.4",
"glob-parent": "^6.0.2",
"is-extglob": "^2.1.1",
"jquery": "3.6.0",
"prop-types": "^15.6.1",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"webpack-dev-server": "^4.7.4"
}
}
.babelrc 文件是：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"es6-promise",
"transform-object-assign",
[
"@babel/plugin-proposal-object-rest-spread",
{ "useBuiltIns": true }
],
[
"module-resolver",
{ "alias": { "common_scripts": "./common_scripts" } }
]
]
}
我不确定这是否会有所不同，但我的 webpack.config.js 是：
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
context: __dirname,
output: {
path: __dirname,
filename: '[name].bundle.js'
},
devtool: 'eval-cheap-module-source-map',
entry: {
'Content/CSS/bundles/common': './Content/CSS/commonCss.js',
'Scripts/bundles/common': ['babel-polyfill', './Scripts/common.js'],
'Scripts/bundles/gdpr_dm': ['babel-polyfill', './Areas/Gdpr/DataMappingApp/main.jsx'],
'Scripts/bundles/gdpr_dma': ['babel-polyfill', './Areas/Gdpr/GdprListAdminApp/main.jsx'],
'Scripts/bundles/gdpr_sar': ['babel-polyfill', './Areas/Gdpr/SarApp/main.jsx'],
'Scripts/bundles/support_columns': ['babel-polyfill', './Areas/Support/GridColumnsAdminApp/main.jsx'],
'Scripts/bundles/vendor': [
'react', 'react-router', 'react-dom',
'react-router-dom', 'redux', 'react-redux',
'@progress/kendo-ui/js/kendo.core', '@progress/kendo-dropdowns-react-wrapper',
'@progress/kendo-grid-react-wrapper', '@progress/kendo-ui/js/kendo.grid.js',
'@progress/kendo-ui/js/kendo.tooltip', '@progress/kendo-ui/js/kendo.multiselect'
],
'Scripts/bundles/admin_area': ['babel-polyfill', './Areas/Admin/scripts/admin_area.js']
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [
path.join(__dirname, '/Areas/Gdpr/DataMappingApp/'),
path.join(__dirname, '/Areas/Gdpr/GdprListAdminApp/'),
path.join(__dirname, '/Areas/Gdpr/SarApp/'),
path.join(__dirname, '/Areas/Support/GridColumnsAdminApp/'),
path.join(__dirname, '/common_scripts/')
],
use: [{
loader: 'babel-loader',
}]
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.(png|jpe?g|gif)$/,
use: [{ loader: 'url-loader',
options: {
limit: 4096,
name: '[name].[ext]&useRelativePath=true&publicPath=../'
}
}]
}
]
},
plugins: [
new MiniCssExtractPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new webpack.ProvidePlugin({
__assign: ['tslib', '__assign'],
__extends: ['tslib', '__extends'],
}),
],
resolve: {
extensions: ['.js', '.jsx'/*, ".tsx", ".ts"*/],
fallback: {
"fs": false,
"crypto": require.resolve("crypto-browserify"),
"https": require.resolve("https-browserify"),
"stream": require.resolve("stream-browserify"),
"path": require.resolve("path-browserify"),
"http": require.resolve("stream-http"),
},
alias: {
common_scripts: path.resolve(__dirname, 'common_scripts'),
process: "process/browser"
}
},
};
我在 babel 文件中遗漏了什么吗？还是我把那行重写错了？
您通过了 --presets=env，错误试图告诉您应该 --presets=@babel/preset-env。
我被要求检查我们的应用程序并更新所有框架，因为它非常过时，其中一件事是更新 babel，现在 package.json 中的一个脚本是：
"compile": "babel --presets es2015 -d /tests common_scripts/",
但在网上看到我看到 babel --presets es2015 应该替换为 @babel/preset-env 我做了，我试着像这样更新脚本：
"compile": "babel --presets=env -d /tests common_scripts/"
然而，当我 运行 现在我收到错误：
{ Error: Cannot find module 'babel-preset-env'
- Did you mean "@babel/env"?
我不确定为什么，也看不出哪里出错了。
我的package.json是这样的：
{
"main": "index.js",
"scripts": {
"compile": "babel --presets=env -d /tests common_scripts/",
"test": "npm run compile && mocha --require @babel/core/register jsdom-global/register common_scripts/**/*tests.js Areas/Gdpr/DataMappingApp/**/*tests.js Areas/Gdpr/GdprListAdminApp/**/*tests.js Areas/Gdpr/scripts/*.tests.js Areas/Support/GridColumnsAdminApp/**/*tests.js --reporter spec",
"buildDev": "npm run unsetReadOnly && webpack --env NODE_ENV=local && ECHO Completed at %TIME% ",
"buildDevB": "npm run unsetReadOnly && webpack --env NODE_ENV=local && ECHO Completed at %TIME% && echo \u0007 ",
"buildProd": "npm run unsetReadOnly",
"lint": "eslint Areas/Gdpr/DataMappingApp/** Areas/Gdpr/GdprListAdminApp/** Areas/Support/GridColumnsAdminApp/** Areas/Gdpr/SarApp/** common_scripts/**",
"unsetReadOnly": "attrib -R Content\kendo\2017.1.223\Bootstrap\*.png /S",
"bell": "echo \u0007",
"preinstall": "npx npm-force-resolutions"
},
"author": "BusinessPort",
"license": "ISC",
"resolutions": {
"js-yaml": "^3.11.3",
"is-svg": "^4.2.2"
},
"devDependencies": {
"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.8",
"@babel/node": "^7.16.8",
"@babel/plugin-proposal-object-rest-spread": "7.17.3",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"babel-eslint": "^8.2.3",
"babel-loader": "^8.2.4",
"babel-plugin-es6-promise": "^1.1.1",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"chai": "^4.1.2",
"css-loader": "^6.7.1",
"eslint": "^8.12.0",
"eslint-import-resolver-babel-module": "^4.0.0",
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-react": "^7.7.0",
"file-loader": "^6.2.0",
"jsdom": "^11.10.0",
"jsdom-global": "^3.0.2",
"mini-css-extract-plugin": "2.4.0",
"mocha": "^9.2.2",
"node": "^9.8.0",
"script-loader": "^0.7.2",
"source-map-support": "0.4.3",
"style-loader": "^0.20.3",
"ts-loader": "^3.5.0",
"typescript": "^2.6.2",
"url-loader": "^4.1.1",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2"
},
"dependencies": {
"@popperjs/core": "^2.11.4",
"@progress/kendo-data-query": "^1.2.2",
"@progress/kendo-dateinputs-react-wrapper": "^2018.2.620",
"@progress/kendo-dropdowns-react-wrapper": "^2018.1.221",
"@progress/kendo-grid-react-wrapper": "^2018.1.221",
"@progress/kendo-react-dropdowns": "^0.5.1",
"@progress/kendo-theme-bootstrap": "^5.2.0",
"@progress/kendo-theme-default": "^2.50.0",
"@progress/kendo-ui": "^2018.1.411",
"@progress/kendo-validator-react-wrapper": "^2018.1.221",
"@progress/kendo-window-react-wrapper": "^2018.1.221",
"acorn": "^8.7.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^5.1.3",
"braces": "^3.0.2",
"es6-promise": "^4.2.4",
"glob-parent": "^6.0.2",
"is-extglob": "^2.1.1",
"jquery": "3.6.0",
"prop-types": "^15.6.1",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"webpack-dev-server": "^4.7.4"
}
}
.babelrc 文件是：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"es6-promise",
"transform-object-assign",
[
"@babel/plugin-proposal-object-rest-spread",
{ "useBuiltIns": true }
],
[
"module-resolver",
{ "alias": { "common_scripts": "./common_scripts" } }
]
]
}
我不确定这是否会有所不同，但我的 webpack.config.js 是：
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
context: __dirname,
output: {
path: __dirname,
filename: '[name].bundle.js'
},
devtool: 'eval-cheap-module-source-map',
entry: {
'Content/CSS/bundles/common': './Content/CSS/commonCss.js',
'Scripts/bundles/common': ['babel-polyfill', './Scripts/common.js'],
'Scripts/bundles/gdpr_dm': ['babel-polyfill', './Areas/Gdpr/DataMappingApp/main.jsx'],
'Scripts/bundles/gdpr_dma': ['babel-polyfill', './Areas/Gdpr/GdprListAdminApp/main.jsx'],
'Scripts/bundles/gdpr_sar': ['babel-polyfill', './Areas/Gdpr/SarApp/main.jsx'],
'Scripts/bundles/support_columns': ['babel-polyfill', './Areas/Support/GridColumnsAdminApp/main.jsx'],
'Scripts/bundles/vendor': [
'react', 'react-router', 'react-dom',
'react-router-dom', 'redux', 'react-redux',
'@progress/kendo-ui/js/kendo.core', '@progress/kendo-dropdowns-react-wrapper',
'@progress/kendo-grid-react-wrapper', '@progress/kendo-ui/js/kendo.grid.js',
'@progress/kendo-ui/js/kendo.tooltip', '@progress/kendo-ui/js/kendo.multiselect'
],
'Scripts/bundles/admin_area': ['babel-polyfill', './Areas/Admin/scripts/admin_area.js']
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [
path.join(__dirname, '/Areas/Gdpr/DataMappingApp/'),
path.join(__dirname, '/Areas/Gdpr/GdprListAdminApp/'),
path.join(__dirname, '/Areas/Gdpr/SarApp/'),
path.join(__dirname, '/Areas/Support/GridColumnsAdminApp/'),
path.join(__dirname, '/common_scripts/')
],
use: [{
loader: 'babel-loader',
}]
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.(png|jpe?g|gif)$/,
use: [{ loader: 'url-loader',
options: {
limit: 4096,
name: '[name].[ext]&useRelativePath=true&publicPath=../'
}
}]
}
]
},
plugins: [
new MiniCssExtractPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new webpack.ProvidePlugin({
__assign: ['tslib', '__assign'],
__extends: ['tslib', '__extends'],
}),
],
resolve: {
extensions: ['.js', '.jsx'/*, ".tsx", ".ts"*/],
fallback: {
"fs": false,
"crypto": require.resolve("crypto-browserify"),
"https": require.resolve("https-browserify"),
"stream": require.resolve("stream-browserify"),
"path": require.resolve("path-browserify"),
"http": require.resolve("stream-http"),
},
alias: {
common_scripts: path.resolve(__dirname, 'common_scripts'),
process: "process/browser"
}
},
};
我在 babel 文件中遗漏了什么吗？还是我把那行重写错了？
您通过了 --presets=env，错误试图告诉您应该 --presets=@babel/preset-env。