Babel ES6 导入错误，SyntaxError: Unexpected token import答案

【问题标题】：Babel ES6 import error, SyntaxError: Unexpected token importBabel ES6 导入错误，SyntaxError: Unexpected token import
【发布时间】：2017-12-30 18:58:14
【问题描述】：

我正在尝试设置一个基本的模块化程序，但是我似乎遇到了导入模块的问题。我尝试导入我的自定义模块，我收到以下错误：

(function (exports, require, module, __filename, __dirname) { import testStep from 'testStep';
                                                          ^^^^^^
SyntaxError: Unexpected token import

导致问题的代码：

testcase.js

import testStep from 'testStep';

testStep.hello();

testStep.js

var testStep = {
  hello: hello,
};

var hello = () => {
  console.log('hello world');
};

export default {testStep};

package.json

{
  "name": "rebuild-poc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.6.0"
  },
  "dependencies": {}
}

.babelrc

{
  "presets": [
    "env"
  ]
}

我已经尝试了其他几个修复，例如将testStep 设置为一个类，以及使用require('./testStep.js')，但是这些似乎都没有奏效。

我是否在 babel 或我的某个文件中设置了不正确的内容？

***编辑：我正在运行 testCase.js 和 node testCase.js。

【问题讨论】：

testStep 中似乎有一个额外的括号或额外的逗号
import 不能在函数内部
@Matthew 在 es6 尾随逗号是允许的，但我尝试删除它并没有解决问题。
@JaromandaX 你能再澄清一下吗？据我所知，导入不在函数内部。它只是在脚本中，但也许我误解了
它在 IIFE 中（根据错误消息）....Import declarations are only allowed at the top level of module scope ...我可能误解了您现在得到的错误输出，因为我已经更仔细地查看了问题中的代码

标签： javascript node.js babeljs

【解决方案1】：

请安装babel-cli 并调用您的文件：./node_modules/.bin/babel-node testcase.js

它会失败。现在我们必须修复您的代码。

testStep.js 应该如下所示：

var hello = () => {
  console.log('hello world');
};

var testStep = {
  hello: hello,
};

export default testStep;

然后，它将起作用。 ;)

https://babeljs.io/ 的第一个介绍是，你应该安装babel-cli 和babel-preset-env。 ;)

你也可以这样写你的 testStep.js：

var testStep = {
  hello: hello,
};

function hello () {
  console.log('hello world');
};

export default testStep;

这样可以记住提升。就像Jacob 在他的第一点中所说的那样。

【讨论】：

【解决方案2】：

来自 babel 6 发行说明：

插件预设

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

保存 .babelrc 文件

{
  presets: ["env"]
}

注意： https://babeljs.io/docs/en/babel-preset-env#docsNav

【讨论】：

Babel 推荐使用其他包babel-preset-env

【解决方案3】：

你需要用function定义hello，使用var，你不会有function hoisting，所以在声明testStep时，hello是未定义的。
如果要使用es模块，可以使用babel-register或babel-node。在您的代码中，node 无法处理 es 模块。

Babel-register

使用 bebel-register，你所有的模块在导入时都会被 babel 处理。

首先，yarn add babel-register babel-cli --dev 或 npm install babel-register babel-cli -dev 然后创建入口文件：

// entry.js
require('babel-register')
require('testcase')

在您的测试用例中，您现在可以使用 es 模块了。

编辑你的 package.json：

"scripts": {
    "test": "node entry.js"
},

您可以在终端中运行yarn test 或npm run test。

你不需要babel-polyfill，那是针对浏览器的，不是针对节点的。

【讨论】：