语法错误：意外的标记import - import * as gulp from 'gulp'

Question

如果你运行gulp，会得到以下错误信息。

是否没有安装gulpfile所需的模块？..

$ gulp
[22:17:15] Failed to load external module ts-node/register
[22:17:15] Failed to load external module typescript-node/register
[22:17:15] Failed to load external module typescript-register
[22:17:15] Failed to load external module typescript-require
C:\project\interview\gulpfile.ts:1
(function (exports, require, module, __filename, __dirname) { import * as gulp f                                 rom 'gulp';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Liftoff.handleArguments (C:\Users\admin\AppData\Roaming\npm\node_modules\gu                                 lp\bin\gulp.js:116:3)

- skj

---

请使用 --module commonjs 来针对 Node 运行时，包括在通过 ts-node 运行时。 - Aluan Haddad

看起来您正在使用由 ts-node 动态编译的 gulpfile.ts。这是可以的，但是您需要通过 TypeScript 或另一个中间编译器将其定位到 NodeJS 的模块系统，这是 CommonJS 的衍生物。您正在使用 --module es2015 将 gulpfile 输出，可能是通过一个共存的 tsconfig.json 文件。 - Aluan Haddad

Answer 1

要让gulp与ES6导入一起工作，您需要完成以下3个步骤：

1. 将gulpfile.js重命名为gulpfile.babel.js

2. 运行此命令：

npm i @babel/preset-env @babel/register -D

3. 在你的项目根目录下添加一个.babelrc文件，并将以下代码添加到其中：

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

现在，您应该能够在Gulp文件中使用ES6导入。

注意：如果您想在Gulp文件中使用TypeScript，您应该遵循此处概述的步骤：

https://dev59.com/eVUL5IYBdhLWcg3wv6Vx#49849088

- Daniel Tonon

Answer 2

1) 在您的项目文件夹中创建一个“.babelrc”文件（其中也包括您的所有其他配置文件）

• 代码（.babelrc）

  { "presets": ["es2015"] }

2) 在您的NPM中设置/安装Babel（请参见https://babeljs.io/setup）。例如使用Node：

npm install babel-preset-env --save-dev

- Birol Efe

---

你的回答有几个问题。在第二步中，你说要安装 babel-preset-env，但在第一步中，你设置了 es2015 作为预设，这是一个不同于你告诉人们下载的预设。最后，你没有提到需要将 .babel 添加到 gulp 文件中。 - Daniel Tonon