SyntaxError: Unexpected token import

待我称王封你为后i 2022-06-04 02:50 184阅读 0赞

之前，为做一些NodeJS的一些相关测试，在 webstrom 工具写代码测试的时候，出现了一个问题，运行测试代码的时候，老是提示不支持 import 关键字。现象如下:  
我创建了一个测试文件 `assert.js`

import assert from "assert";
    assert(1 === 2);

直接在 webstrom 中运行，然后就出现以下错误：

"F:\Program Files\JetBrains\WebStorm 2017.2\bin\runnerw.exe" E:\hsl\java\software\nodejs\node.exe E:\hsl\web\nodeJs\js\assert.js
    E:\hsl\web\nodeJs\js\assert.js:5
    import assert from "assert";
    ^^^^^^
    
    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.runMain (module.js:604:10)
        at run (bootstrap_node.js:389:7)
        at startup (bootstrap_node.js:149:9)
    
    Process finished with exit code 1

为了解决这个问题，我在网上找了很多方法，都没有得到解决。后来在查 nodeJs 运行环境时，终于找到问题的根源了。

目前 NodeJs 只支持部分 ES6 的语法，有些 ES6 的语法还不支持，而 import 语法就是其中之一，web browser 也是一样，只支持部分语法。而要 NodeJs 全部支持 ES6 的语法，可能需要在今后新版本的 NodeJs 才可以。

解决这个问题，可以找一些目前使用的替代方案，比如使用 Babel-cli 插件，将 ES6 转换成 ES5，然后再使用。当然你也可以不使用 import 语法，而使用具有相同功能的 require 语法(非 ES6 语法)。

比如使用 `require`:

// import assert from "assert";
    const assert = require("assert");
    assert(1 === 2);

直接在 webstrom 中运行，可以正常看到测试结果：

"F:\Program Files\JetBrains\WebStorm 2017.2\bin\runnerw.exe" E:\hsl\java\software\nodejs\node.exe E:\hsl\web\nodeJs\js\assert.js
    
    assert.js:81
      throw new assert.AssertionError({
      ^
    AssertionError: false == true
        at Object.<anonymous> (E:\hsl\web\nodeJs\js\assert.js:8:1)
        at Module._compile (module.js:570:32)
        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.runMain (module.js:604:10)
        at run (bootstrap_node.js:389:7)
        at startup (bootstrap_node.js:149:9)
        at bootstrap_node.js:502:3
    
    Process finished with exit code 1

如果你一定需要使用 `import`语法，则需要结合 babel 一起使用。如下我自己解决方法，代码中结合了 webpack 的一些相关技术，比如使用 webpack-dev-server，以及生产环境与开发环境分离等技术。若有不怎么了解这方面知识的，可以参考如下几篇文章：

> [Webpack整合实例及优化][Webpack]  
> [webpack-dev-server 使用 hash][webpack-dev-server _ hash]  
> [webpack开发环境与生产环境分离][webpack]

若是不会搭建 webstrom 中 ES6 的开发环境，可以参考这篇文章：

> [webstrom 配置 es6 的运行环境][webstrom _ es6]

如下是解决方案的源代码：  
首先贴一张整体的结构图：  
![这里写图片描述][SouthEast]

assert.js

/** * Created by DreamCatcher on 2017/12/2. */
    
    import assert from "assert";
    assert(1 === 2);

index.js

/** * Created by DreamCatcher on 2017/12/2. */
    import assert from "./assert";

index.temp.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test webpack</title>
    </head>
    <body>
    
        <h3>Test the NODE JS</h3>
    
    </body>
    </html>

package.json

{
      "name": "nodejs",
      "version": "1.0.0",
      "description": "This is just a test of the nodeJs",
      "main": "index.js",
      "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js" },
      "keywords": [ "nodeJs", "test", "dev-server", "webpack" ],
      "author": "slHuang",
      "license": "ISC",
      "devDependencies": { "babel-core": "^6.26.0", "babel-cli": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.1", "babel-plugin-transform-runtime": "^6.23.0", "webpack": "^3.9.1", "webpack-dev-server": "^2.9.5", "webpack-merge": "^4.1.1", "clean-webpack-plugin": "^0.1.17", "html-webpack-plugin": "^2.30.1", "eslint": "^4.12.1" },
      "dependencies": { "babel-runtime": "^6.26.0" } }

webpack.common.js

webpack.dev.js

webpack.prod.js

选中 package.json 中 scripts 下面的 start 方法，右键点击 run start.  
![这里写图片描述][SouthEast 1]

若在控制台中看到如下信息，说明运行成功，并会自动打开了一个 browser 页面。  
![这里写图片描述][SouthEast 2]

在自动打开的 browser 中，打开调试窗口，会看到你的 assert 结果信息。  
![这里写图片描述][SouthEast 3]

然后，修改 assert.js 中的代码，webstrom 会自动进行编译，并自动刷新 browser 页面。

[Webpack]: http://blog.csdn.net/hsl0530hsl/article/details/78490034
[webpack-dev-server _ hash]: http://blog.csdn.net/hsl0530hsl/article/details/78474026
[webpack]: http://blog.csdn.net/hsl0530hsl/article/details/78603148
[webstrom _ es6]: http://blog.csdn.net/hsl0530hsl/article/details/78051878
[SouthEast]: /images/20220604/07b203c87d624fbf995449d280d1f4cc.png
[SouthEast 1]: /images/20220604/a767ab11c0924ba9bbf46f25096bcff4.png
[SouthEast 2]: /images/20220604/94b24ebe306e435081ee618344679430.png
[SouthEast 3]: /images/20220604/79a19700d3054deb9aae035d80d3255f.png