logo标签列表

尝试运行Babel时出现错误："找不到@babel/core模块"。

babeljs
6

我正在尝试建立一个构建环境，以探索react。我的构建过程使用gulp。

我安装了如下的软件包:

npm install --save-dev gulp-babel@7 babel-core babel-preset-env

在发现需要安装babel和react相关的东西之后，我还运行了以下命令：

npm install --save-dev @babel/preset-react

我的.babelrc文件内容如下:

{ "presets": ["@babel/preset-react"] }

我的gulpfile文件内容如下: 

gulp.task('scripts', function() {
    return gulp.src(['./src/js/main.js' ])
        .pipe(babel({
            presets : ['@babel/preset/react']
        }))
        .pipe(concat('test.js'))
        .pipe(gulp.dest('./js'))
        .pipe(uglify())
        .pipe(rename('test.min.js'))
        .pipe(gulp.dest('./js')) ;
});

当我运行 'gulp scripts' 命令时，会得到以下输出：
[22:51:14] Using gulpfile ~/play/learning-react-2/gulpfile.js
[22:51:14] Starting 'scripts'...
[22:51:14] 'scripts' errored after 59 ms
[22:51:14] Error in plugin "gulp-babel"
Message:
    Cannot find module '@babel/core' (While processing preset: "/home/bob/play/learning-react-2/node_modules/@babel/preset-react/lib/index.js")

我从node_modules中删除了babel-core，并使用以下命令重新安装：

npm install --save-dev @babel/core

如果查看node_modules的内容，可以看到与babel相关的这些包：

babel-code-frame/
babel-helper-builder-binary-assignment-operator-visitor/ babel-helper-call-delegate/
babel-helper-define-map/
babel-helper-explode-assignable-expression/
babel-helper-function-name/
babel-helper-get-function-arity/
babel-helper-hoist-variables/
babel-helper-optimise-call-expression/
babel-helper-regex/
babel-helper-remap-async-to-generator/
babel-helper-replace-supers/
babel-messages/
babel-plugin-check-es2015-constants/
babel-plugin-syntax-async-functions/
babel-plugin-syntax-exponentiation-operator/
babel-plugin-syntax-trailing-function-commas/
babel-plugin-transform-async-to-generator/
babel-plugin-transform-es2015-arrow-functions/
babel-plugin-transform-es2015-block-scoped-functions/
babel-plugin-transform-es2015-block-scoping/
babel-plugin-transform-es2015-classes/
babel-plugin-transform-es2015-computed-properties/
babel-plugin-transform-es2015-destructuring/
babel-plugin-transform-es2015-duplicate-keys/
babel-plugin-transform-es2015-for-of/
babel-plugin-transform-es2015-function-name/
babel-plugin-transform-es2015-literals/
babel-plugin-transform-es2015-modules-amd/
babel-plugin-transform-es2015-modules-commonjs/
babel-plugin-transform-es2015-modules-systemjs/
babel-plugin-transform-es2015-modules-umd/
babel-plugin-transform-es2015-object-super/
babel-plugin-transform-es2015-parameters/
babel-plugin-transform-es2015-shorthand-properties/
babel-plugin-transform-es2015-spread/
babel-plugin-transform-es2015-sticky-regex/
babel-plugin-transform-es2015-template-literals/
babel-plugin-transform-es2015-typeof-symbol/
babel-plugin-transform-es2015-unicode-regex/
babel-plugin-transform-exponentiation-operator/
babel-plugin-transform-regenerator/
babel-plugin-transform-strict-mode/
babel-preset-env/
babel-runtime/
babel-template/
babel-traverse/ babel-types/

我猜至少其中之一是"babel core"

那么...我该如何从gulp中运行babel呢？我应该如何运行它呢？

请安装 @babel/babel-core 和 @babel/preset-env。据我所知，Babel 会将新的包发布在 @babel 前缀下。 - Josef Biehler
当然，这些包是不同的。请看例如 https://www.npmjs.com/package/babel-core 。该软件包已经更新了2年。preset-env也是如此。我已经成功测试了 npm install --save @babel/core @babel/preset-env。不小心我写错了软件包名称。它应该是 @babel/core 而不是 @babel/babel-core。 - Josef Biehler
@JosefBiehler 好的-首先我删除了 'node_modules'。然后我运行了 'npm install --save @babel/core @babel/preset-env'。我还重新安装了 gulp 模块。然后我运行了这个命令：'./node_modules/.bin/babel src/js --out-dir js'。这个工作正如预期的那样。但是，当我运行 'gulp' 时，我收到了“Error: cannot find module 'babel-core'” 的错误消息。因此，问题必须与 gulp 相关的事情有关。 - bob
我在这个评论中找到了一个（有点）解决方案：https://github.com/babel/gulp-babel/issues/124#issuecomment-476877592。安装“gulp-babel@next”后，gulp任务可以正常工作。这并不是一个真正的解决方案，因为我不知道这个包是什么。 - bob
嘿，不幸的是我不使用gulp而是webpack+react。因此我不能再帮你了。抱歉 :-( 或许我会在接下来的几天里找些时间用一个小例子来测试一下。 - Josef Biehler
显示剩余2条评论
3个回答
26

我遇到了相同的问题。我通过删除 node_modules 并重新安装包（使用 yarn 或 npm install）来解决它。问题已经解决。

1
如果你使用yarn，运行命令yarn add @babel/helper-environment-visitor将解决这个问题。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接