我正在尝试建立一个构建环境来探索反应。 我的构建过程使用了gulp。
我安装了这样的软件包:
npm install --save-dev gulp-babel @ 7 babel-core babel-preset-env
发现我需要安装与babel相关的东西并做出反应后,我还跑了:
npm install --save-dev @ babel / preset-react
我的.babelrc有这个:
{“预设”:[“ @ 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插件语法跟踪功能逗号/
babel-plugin-transform-async-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-types /
我猜测其中至少有一个是“巴比尔核心”
那么...我实际上如何从gulp运行babel?我怎么运行它?
答案 0 :(得分:5)
我遇到了同样的问题。我通过删除 node_modules
解决了这个问题,并重新安装了软件包(使用 yarn
或 npm install
)。问题已解决。