我在用着：
我有这 3 行代码：
import h from 'inferno-hyperscript';
import hh from 'hyperscript-helpers';
const html = hh(h);
这段代码给了我这个错误：
TypeError: hyperscript_helpers_1.default is not a function
我package.json的是：
{
"name": "frontend",
"version": "0.0.1",
"private": true,
"description": "Typescript inferno prove",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --inline"
},
"author": "Leonardo Saracini",
"license": "MIT",
"engines": {
"node": "7.7.4"
},
"dependencies": {
"@types/ramda": "^0.24.4",
"classnames": "^2.2.5",
"hyperscript": "^2.0.2",
"inferno": "^3.6.4",
"inferno-hyperscript": "^3.6.4",
"hyperscript-helpers": "^3.0.3",
"inferno-redux": "^3.6.4",
"ramda": "^0.24.1",
"redux": "^3.7.2"
},
"devDependencies": {
"@types/classnames": "^2.2.0",
"awesome-typescript-loader": "^3.2.1",
"css-loader": "^0.28.4",
"ejs-loader": "^0.3.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.2",
"typescript": "^2.4.2",
"webpack": "^3.3.0",
"webpack-bundle-analyzer": "^2.8.3",
"webpack-dev-server": "2.5.1"
}
}
我的 webpack.config.js 是：
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// definePlugin takes raw strings and inserts them, so you can put strings of JS if you want.
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});
module.exports = {
entry: path.resolve(__dirname, 'src/index.ts'), //entrata da compilare. Se ne possono aggiungere molte creando vari profili
output: {
filename: 'bundle.js', //file di output dove mettere il compilato
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
devServer: {
hot: true, // Tell the dev-server we're using HMR
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
devtool: "inline-source-map",
plugins: [
definePlugin,
new webpack.LoaderOptionsPlugin({
debug: true
}),
new HtmlWebpackPlugin({
title: 'Prima prova',
template: 'src/index.ejs'
}),
new webpack.HotModuleReplacementPlugin() // Enable HMR
//, new BundleAnalyzerPlugin()
],
module: {
rules: [// rules was named loaders in webpack 1 or 2; but is be renamed "rules" in now
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.ejs$/,
loader: 'ejs-loader'
},
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
transpileOnly: true
}
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
test: /\.js$/,
enforce: 'pre',
loader: 'source-map-loader'
},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, // inline base64 URLs for <=8k images, direct URLs for the rest
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{ test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
},
resolve: {
modules: [__dirname, 'node_modules'],
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.json'] // note if using webpack 1 you'd also need a '' in the array as well
}
};
我的 tsconfig.json 是：
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"lib": ["es6", "es7", "dom"],
"types": [ "inferno" ],
"noImplicitAny": true,
"allowJs": false,
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"preserveConstEnums": true,
"outDir": "./dist/",
"listFiles": true,
"sourceMap": true,
"jsx": "preserve",
"noImplicitReturns": false,
"noFallthroughCasesInSwitch": true,
"experimentalDecorators": false,
"noUnusedLocals": true,
"strictNullChecks": true,
"removeComments": false
},
"exclude": [ "node_modules" ],
"include": [
"./typing.d.ts",
"./src/**/*.ts",
"./src/**/*.tsx"
],
"compileOnSave": false,
"formatCodeOptions": {
"indentSize": 2,
"tabSize": 2,
"newLineCharacter": "\n",
"convertTabsToSpaces": true,
"insertSpaceAfterCommaDelimiter": true,
"insertSpaceAfterSemicolonInForStatements": true,
"insertSpaceBeforeAndAfterBinaryOperators": true,
"insertSpaceAfterKeywordsInControlFlowStatements": true,
"insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
"placeOpenBraceOnNewLineForFunctions": false,
"placeOpenBraceOnNewLineForControlBlocks": false
},
"atom": {
"rewriteTsconfig": true
}
}
我的 typings.json 是：
{
"dependencies": {
"debug": "registry:npm/debug#2.0.0+20160723033700",
"ramda": "registry:dt/ramda#0.0.0+20170322181526"
},
"globalDependencies": {
"classnames": "registry:dt/classnames#0.0.0+20161113184211",
"hyperscript": "registry:dt/hyperscript#0.0.0+20161005184000",
"node": "registry:dt/node#7.0.0+20170322231424",
"redux": "registry:dt/redux#3.5.2+20160703092728"
}
}
我找不到正确的方式来声明此代码。
我发现很多在其他框架上使用超脚本和超脚本助手的React例子，比如混合 webpack、inferno 和 typescript 的例子。
有人知道正确的语法吗？错误是触发执行行const html = hh(h);
最好的问候