Question

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

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'
    }
};

package.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"
  }

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

Answer 1

如果我在"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组件标签和hyperhtml标签看起来有点滥用/冗余，因为它们与字面意义无关您如何配置测试环境。

无论如何，我希望能够弄清问题所在，以及在项目中总体上可以改进的地方。

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

1 个答案: