babeljs - 尝试运行 babel : "cannot find module @babel/core"

Question

我正在尝试建立一个构建环境来探索 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 脚本”时，我得到了这个:

[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？我该如何运行它？

Answer 1

我遇到过同样的问题。我通过删除 node_modules 解决了它我重新安装了软件包(使用 yarn 或 npm install )。问题已解决。