我有reactjs + typescript Web应用程序,该应用程序想使用opencv.js库执行一些视觉任务。但是,我无法使intellisense在该库的Visual Studio Code IDE中工作。我按以下方式加载库
var CV = require('../opencvLibs/build_js/bin/opencv_js.js');
class InnerApp extends React.Component{
componentDidMount(){
CV["onRuntimeInitialized"]= () => {
let mat = new CV.Mat();
console.log(mat.size());
mat.delete();
}
}
render(){
return(
<Provider rootStore = {new RootStore()}>
<App/>
</Provider>
)
}
}
ReactDOM.render(
<Provider>
<InnerApp />
</Provider>,
document.getElementById('root'));
如您所见,我正在登录控制台的空垫大小,只是为了检查库是否工作正常,并且正确记录了宽度和高度,这表明库已成功加载。
我试图添加jsconfig.json文件,因为我认为这是正式的Visual Studio Code文档中的潜在解决方案,但这没用。
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"esModuleInterop": true,
"removeComments": true,
"preserveConstEnums": true,
"jsx": "react",
"sourceMap": true,
"experimentalDecorators": true,
"lib": ["es6","dom"],
"typeRoots": [
"typings",
"node_modules/@types"
]
},
"files":[
"opencvLibs/build_js_wasm/bin/opencv.js"
]
}
jsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs"
},
"exclude": [
"node_modules",
"**/node_modules/*"
],
"include": [
"opencvLibs/build_js/bin/opencv.js"
],
"typeAcquisition": {
"include": [
"opencvLibs/build_js/bin/opencv.js"
]
}
}
webpack.dev.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const HOST = process.env.HOST || '127.0.0.1';
const PORT = process.env.PORT || '9000';
const config = {
mode: 'development',
entry: {
app: './src/index.tsx',
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].bundle.js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
devtool: 'eval-cheap-module-source-map',
module: {
rules: [{
test: /\.tsx?$/,
use: [{
loader: 'ts-loader',
options: {
onlyCompileBundledFiles: true,
}
}]
},
{
test: /\.(s?)css$/,
use: ['style-loader','css-loader','sass-loader']
},
{
test: /\.otf$/,
use: {
loader: 'file-loader',
options: {
name: 'dist/fonts/[name].[ext]'
}
}
},
{
//test: /\.(png|jpe?g|gif|svg)$/
test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
use: [{
loader: 'url-loader',
//loader: 'url?limit=100000&name=[name].[ext]',
options: {
limit: 8192
}
}]
},
],
},
devServer: {
host: HOST,
port: PORT,
compress: true,
inline: true,
historyApiFallback: true,
hot: true,
overlay: true,
open: true,
},
plugins: [
new webpack.LoaderOptionsPlugin({
options:{
scripts: [
"../opencvLibs/build_js_wasm/bin/opencv.js"
]}
}),
new webpack.HotModuleReplacementPlugin({
}),
new HtmlWebpackPlugin({
template: 'src/index.html',
title: 'React Mobx Starter',
inject: 'body'
}),
],
node: {
fs: 'empty'
},
};
module.exports = config;
预期的结果是,当我键入“ CV”时,智能感知将起作用。
感谢您的帮助!