node.js - 无法启动 pnpm 脚本 - 错误：命令失败，退出代码为 1

Question

我正在使用 pnpm 启动我的 gulp 脚本，但这是我第二次遇到此错误并且我不知道如何修复它。

我试过了 ：

• 卸载然后重新安装节点
• 与 pnpm、gulp-cli 和 gulp 相同
• 删除 node_modules 文件夹，然后pnpm install
• 重新安装 webpack、@babel/core、@babel/register
• 添加type: module到我的 package.json

这是错误消息：

➜  sabir git:(master) ✗ pnpm start           

> sabir@1.0.0 start /Users/vianneybernet/Library/Mobile Documents/com~apple~CloudDocs/Sites/sabir
> gulp

[18:14:01] Requiring external module @babel/register
/Users/vianneybernet/Library/Mobile Documents/com~apple~CloudDocs/Sites/sabir/gulpfile.babel.js:1
import { src, dest, watch, series, parallel } from 'gulp';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Module._compile (/Users/vianneybernet/Library/Mobile Documents/com~apple~CloudDocs/Sites/sabir/node_modules/.pnpm/registry.npmjs.org/pirates/4.0.1/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Object.newLoader [as .js] (/Users/vianneybernet/Library/Mobile Documents/com~apple~CloudDocs/Sites/sabir/node_modules/.pnpm/registry.npmjs.org/pirates/4.0.1/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at execute (/Users/vianneybernet/Library/Mobile Documents/com~apple~CloudDocs/Sites/sabir/node_modules/.pnpm/registry.npmjs.org/gulp-cli/2.2.0/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:36:18)
    at Liftoff.handleArguments (/Users/vianneybernet/Library/Mobile Documents/com~apple~CloudDocs/Sites/sabir/node_modules/.pnpm/registry.npmjs.org/gulp-cli/2.2.0/node_modules/gulp-cli/index.js:201:24)
 ERROR  Command failed with exit code 1.

这是我的gulp 脚本：

import { src, dest, watch, series, parallel } from 'gulp';
import yargs from 'yargs';
import sass from 'gulp-sass';
import cleanCss from 'gulp-clean-css';
import gulpif from 'gulp-if';
import postcss from 'gulp-postcss';
import sourcemaps from 'gulp-sourcemaps';
import postcssPresetEnv from 'postcss-preset-env';
import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';
import atimport from 'postcss-import';
import del from 'del';
import webpack from 'webpack-stream';
import named from 'vinyl-named';
import browserSync from 'browser-sync';
// import imageOptim from 'gulp-imageoptim';
import imagemin from 'gulp-imagemin';
const PRODUCTION = yargs.argv.prod;

const server = browserSync.create();

export const clean = () => del(['static']);

export const styles = () => {
    return src('src/scss/app.scss')
        .pipe(gulpif(!PRODUCTION, sourcemaps.init()))
        .pipe(sass().on('error', sass.logError))
        .pipe(
            postcss([atimport(), tailwindcss('./tailwind.config.js'), postcssPresetEnv({ stage: 1 })])
        )
        .pipe(gulpif(PRODUCTION, postcss([autoprefixer])))
        .pipe(gulpif(PRODUCTION, cleanCss({ compatibility: 'ie8' })))
        .pipe(gulpif(!PRODUCTION, sourcemaps.write()))
        .pipe(dest('static/css'))
        .pipe(server.stream());
};
export const images = () => {
    return src(['src/images/*.{jpg,jpeg,png,svg,gif}', 'src/images/**/*.{jpg,jpeg,png,svg,gif}'])
        .pipe(gulpif(PRODUCTION, imagemin()))
        .pipe(dest('static/images'));
};
export const copy = () => {
    return src(['src/**/*', '!src/{images,js,scss,css}', '!src/{images,js,scss,css}/**/*']).pipe(
        dest('static')
    );
};
export const scripts = () => {
    return src('src/js/bundle.js')
        .pipe(named())
        .pipe(
            webpack({
                module: {
                    rules: [
                        {
                            test: /\.js$/,
                            use: {
                                loader: 'babel-loader',
                                options: {
                                    presets: []
                                }
                            }
                        }
                    ]
                },
                mode: PRODUCTION ? 'production' : 'development',
                devtool: !PRODUCTION ? 'inline-source-map' : false,
                output: {
                    filename: '[name].js'
                },
                externals: {
                    jquery: 'jQuery'
                }
            })
        )
        .pipe(dest('static/js'));
};
export const watchForChanges = () => {
    watch('src/scss/**/*.scss', styles);
    watch('src/images/**/*.{jpg,jpeg,png,svg,gif}', series(images));
    watch(['src/**/*', '!src/{images,js,scss}', '!src/{images,js,scss}/**/*'], series(copy));
    watch('src/js/**/*.js', series(scripts));
};
export const dev = series(clean, parallel(styles, images, copy, scripts), watchForChanges);
export const build = series(clean, parallel(styles, images, copy, scripts));
export default dev;

感谢您的帮助！

Answer 1

我刚刚注意到 .babelrc 被删除了，它包括：

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