如何修复“找不到模块'gulp-babel'"？

Question

我是通过“学习Bash.第三版”这本书来学习JS的，当涉及到转译器时，我做的每件事都和书中的完全一样，当我在JavaScript中输入吞咽时，我仍然得到一个错误。我能做些什么来修复它吗？

尝试安装@babel/core，babel-env尝试了gulpfile.js中的一些小改动，在互联网上搜索，但没有找到答案……

package.json

"author": "",
"license": "ISC",
"dependencies": {
"underscore": "^1.9.1"
},
"devDependencies": {
 "@babel/cli": "^7.5.5",
 "@babel/core": "^7.5.5",
 "@babel/preset-env": "^7.5.5",
 "babel": "^6.23.0",
 "babel-preset-es2015": "^6.24.1",
 "gulp": "^4.0.2",
 "gulp-babel": "^8.0.0"
 }
 }

gulpfile.js

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', function() {

 gulp.src("es6/**/*.js")
    .pipe(babel({
        presets: ['@babael/env']
        }))
    .pipe(gulp.dest("dist"));

gulp.src("public/es6/**/*.js")
    .pipe(babel())
    .pipe(gulp.dest("public/dist"))
});

babelrc

{ 
"presets": ["es2015"]
}

错误是:内部/modules/cjs/loader.js:628抛出错误；^

Error: Cannot find module 'gulp-babel'
Require stack:
- C:\Users\archi\test\lj\gulpfile.js
- C:\Users\archi\AppData\Roaming\npm\node_modules\gulp- 
  cli\lib\versioned\^4.0.0\index.js
- C:\Users\archi\AppData\Roaming\npm\node_modules\gulp-cli\index.js
- C:\Users\archi\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js
at Function.Module._resolveFilename 
(internal/modules/cjs/loader.js:625:15)
at Function.Module._load (internal/modules/cjs/loader.js:527:27)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object.<anonymous> (C:\Users\archi\test\lj\gulpfile.js:2:15)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\archi\\test\\lj\\gulpfile.js',
'C:\\Users\\archi\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\lib\\versioned\\^4.0.0\\index.js',
'C:\\Users\\archi\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\index.js',
'C:\\Users\\archi\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\bin\\gulp.js'
]
}

Answer 1

您的需求babel核心：

使用npm：

npm install --save-dev @babel/core

使用纱线：

yarn add @babel/core --dev

Answer 2

按照以下步骤，gulp文件中的任务将成功运行(没有警告)：

1. 安装gulp-babel，babel-core和

-env

$ npm install --save-dev gulp-babel @babel/core @babel/preset-env

1. 修改.babelrc如下：

// .babelrc
{"presets": ["@babel/env"]}

1. 将回调添加到gulp任务

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', function(callback) {
    // Node source
    gulp.src("es6/**/*.js")
        .pipe(babel())
        .pipe(gulp.dest("dist"));

    // browser source
    gulp.src("public/es6/**/*.js")
        .pipe(babel())
        .pipe(gulp.dest("public/dist"));
    
    callback();
});