嗨，我正在尝试使用hyperhtml和jest设置 Web 组件骨架项目，并在运行测试用例时出现以下错误
import {Component, bind, define, hyper, wire} from 'hyperhtml/esm';
^^^^^^
SyntaxError: Unexpected token import
针对该问题尝试了堆栈溢出中的所有现有建议，但没有运气。
以下是我的配置
.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"
}
可以在以下存储库中找到代码。 https://github.com/balajiram/webcomponent-elements-app
如果我在预设配置下正确阅读"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 标签看起来都有点滥用/冗余，因为这些实际上与您如何配置测试环境无关。
无论如何，我希望已经澄清了问题所在，以及您可以在项目中总体上改进的地方。