时间戳

首页 > 解决方案 > SyntaxError：意外的令牌导入 - 玩笑

javascript - SyntaxError：意外的令牌导入 - 玩笑

问题描述

嗨，我正在尝试设置 Web 组件骨架项目，hyperhtml并jest在运行测试用例时出现以下错误

import {Component, bind, define, hyper, wire} from 'hyperhtml/esm';
    ^^^^^^
SyntaxError: Unexpected token import

针对该问题尝试了 stackoverflow 中所有现有的建议，但没有运气。

下面是我的配置

.babelrc.json

{
"env": {
    "production": {
        "presets": [
            [
                "env", {
                    "targets": {
                        "browsers": ["last 2 Chrome versions", "last 2 Firefox versions", "last 2 Edge versions", "last 2 Safari versions", "ie 11"]
                    },
                    "modules": false,
                    "useBuiltIns": true
                }
            ]
        ],
        "plugins": [
            "transform-object-rest-spread",
            [
                "babel-plugin-transform-builtin-classes", {
                    "globals": ["HTMLElement"]
                }
            ]
        ]
    },
    "test": {
        "presets": [
            ["env", {
                "targets" : { "node" : "current" },
                "modules": "commonjs",
                "debug": false,
                "useBuiltIns": "usage"
            }],
            "stage-0",
            "jest"
        ],
        "plugins": [
            "transform-object-rest-spread",
            "transform-es2015-modules-commonjs",
            [ "babel-plugin-transform-builtin-classes", { "globals": ["HTMLElement"] } ]
        ]
    }
}

}

jest.config.js

module.exports = {
    verbose: true,
    collectCoverageFrom: [
        './src/**/*.{js,jsx}',
        '!**/_tests/**',
        '!**/node_modules/**'
    ],
    testMatch: ['**/_tests/**/*.js'],
    testPathIgnorePatterns: [
        '<rootDir>/node_modules/',
        '<rootDir>/dist/',
        '<rootDir>/demo/',
        '<rootDir>/docs/'
    ],
    testURL: 'http://localhost/',
    moduleNameMapper: {
        '\\.(css)$': '<rootDir>/test-mocks/styles.js'
    },
    moduleDirectories: ["node_modules", "./src"],
    transform: {
        '^.+\\.(js?)$': 'babel-jest'
    }
};

包.json

"scripts": {
...
"test": "NODE_ENV=test jest --no-cache --config jest.config.js",
 ....
 }
"dependencies": {
    "hyperhtml": "2.10.1",
    "hyperhtml-element": "3.1.0",
    "babel-loader": "7.1.4",
    "babel-jest": "22.4.3"
  },
  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-eslint": "8.2.3",
    "babel-preset-react": "^6.24.1",
    "babel-plugin-transform-builtin-classes": "0.6.1",
    "babel-plugin-transform-dynamic-import": "2.0.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-polyfill": "6.26.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-jest": "^23.2.0",
    "babel-preset-stage-0": "6.24.1",
    "basichtml": "0.16.0",
    "cssnano": "4.1.4",
    "eslint": "4.19.1",
    "eslint-config-airbnb": "17.1.0",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.11.1",
    "jest": "22.4.3",
    "jest-environment-node": "22.4.3",
    "jsdoc": "3.5.5",
    "live-server": "1.2.0",
    "minami": "1.2.3",
    "postcss": "7.0.5",
    "postcss-cssnext": "3.1.0",
    "postcss-custom-media": "7.0.6",
    "postcss-discard-comments": "4.0.1",
    "postcss-easy-import": "3.0.0",
    "postcss-loader": "3.0.0",
    "postcss-mixins": "6.2.0",
    "postcss-nesting": "7.0.0",
    "postcss-reporter": "6.0.0",
    "postcss-selector-not": "4.0.0",
    "prettier-eslint": "8.8.1",
    "sizzle": "2.3.3",
    "stylelint": "9.6.0",
    "stylelint-config-standard": "18.2.0",
    "text-loader": "0.0.1",
    "webpack": "4.8.3",
    "webpack-cli": "3.1.1",
    "webpack-dev-server": "3.1.4",
    "webpack-merge": "4.1.2"
  }

您可以在以下 repo 中找到代码。 https://github.com/balajiram/webcomponent-elements-app

标签： javascriptjestjsweb-componentbabel-jesthyperhtml

解决方案

如果我"modules": "commonjs"在预设配置下正确阅读test，则意味着您至少应该尝试以下操作：

const {Component, bind, define, hyper, wire} = require('hyperhtml/cjs');

您还使用 Babel 6 而不是 7，其中 7 特别适用于类和本机/内置扩展，例如自定义元素。

如果您不需要 Shadow DOM（有问题、缓慢、繁重），我建议您使用部署最多的自定义元素 polyfill，即document-register-element，这几年是 AFrame、Google AMP 和其他。

最后但并非最不重要的一点是，这个问题似乎更像是一个配置问题，因此这里的 web-component 和 hyperhtml 标签看起来都有点滥用/冗余，因为它们实际上与您如何配置测试环境无关。

无论如何，我希望澄清问题是什么，以及您可以在项目中总体改进什么。

推荐阅读