Open danielg-favero opened 6 months ago
Hello, I want to use the package inside a browser extension, but I can't manage to get it right. I'm building the extension with webpack.
webpack.common.js
const path = require('path'); const ESLintPlugin = require('eslint-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const extensionPages = { popup: './src/pages/popup', options: './src/pages/options', } const resources = { loading: './src/lib/Loading' } const scripts = { serviceWorker: './src/threads/serviceWorker', contentScript: './src/threads/contentScript', } const libs = { 'libsvm-js': './node_modules/libsvm-js/dist/browser/wasm/libsvm' } module.exports = { entry: { ...scripts, ...extensionPages, ...resources, ...libs }, experiments: { topLevelAwait: true, asyncWebAssembly: true, syncWebAssembly: true, }, module: { rules: [ { test: /\.(js|ts)x?$/, use: ['babel-loader'], exclude: /node_modules/, }, { test: /\.css$/i, use: ['style-loader', 'css-loader', 'postcss-loader'], }, { test: [/\.wasm(\?v=[0-9]\.[0-9]\.[0-9])?$/, /libsvm\.asm\.js$/, /libsvm\.js\.mem$/], loader: 'url-loader', }, ], }, resolve: { fallback: { path: require.resolve("path-browserify"), crypto: require.resolve("crypto-browserify") }, alias: { '@lib': path.resolve(__dirname, 'src', 'lib'), '@pages': path.resolve(__dirname, 'src', 'pages'), '@threads': path.resolve(__dirname, 'src', 'threads'), '@views': path.resolve(__dirname, 'src', 'views'), '@controllers': path.resolve(__dirname, 'src', 'controllers'), '@services': path.resolve(__dirname, 'src', 'services'), '@factories': path.resolve(__dirname, 'src', 'factories'), '@styles': path.resolve(__dirname, 'src', 'styles'), '@utils': path.resolve(__dirname, 'src', 'utils'), '@models': path.resolve(__dirname, 'src', 'models'), '@handLandmarkDetectors': path.resolve(__dirname, 'src', 'handLandmarkDetectors'), '@gestures': path.resolve(__dirname, 'src', 'gestures'), '@classifiers': path.resolve(__dirname, 'src', 'classifiers'), }, extensions: ['.ts', '.js'], modules: [path.resolve(__dirname, "node_modules")], }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist'), clean: true, }, plugins: [ new CopyPlugin({ patterns: [ path.resolve(__dirname, "./manifest.json"), path.resolve(__dirname, 'src', 'styles', "./tailwind.css"), path.resolve(__dirname, 'src', 'lib', 'Loading', 'loading.css'), { from: 'src/**/*.html', to: '[name][ext]' }, { from: 'public' } ] }), new ESLintPlugin({ extensions: ['js', 'ts'], overrideConfigFile: path.resolve(__dirname, '.eslintrc.cjs'), }), ], };
And after that i'm trying to import the lib inside an Adapter file: svm.ts
svm.ts
import SVM from 'libsvm-js' import { IStaticClassifier } from '@classifiers/types' import { staticImplements } from '@utils/staticImplements' @staticImplements<IStaticClassifier>() export default class SVMClassifier { private estimator: any static create() { const svm = new SVMClassifier() svm.setup() return svm } async setup() { console.log('Iniciando classificador SVM') this.estimator = new SVM({ kernel: SVM.KERNEL_TYPES.POLYNOMIAL, type: SVM.SVM_TYPES.EPSILON_SVR, gamma: 1, cost: 6, degree: 2 }); console.log('Criado classificador SVM') } async fit(data: unknown, labels: unknown) { await this.estimator.train(data, labels) } async predict(hands: unknown) { return this.estimator.predict(hands) } }
What am I missing? Am I doing something wrong?
Hello, I want to use the package inside a browser extension, but I can't manage to get it right. I'm building the extension with webpack.
webpack.common.js
And after that i'm trying to import the lib inside an Adapter file:
svm.ts
What am I missing? Am I doing something wrong?