我正在尝试建立一个构建环境,以探索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 Biehlerpreset-env
也是如此。我已经成功测试了npm install --save @babel/core @babel/preset-env
。不小心我写错了软件包名称。它应该是@babel/core
而不是@babel/babel-core
。 - Josef Biehler