My customized personal "library," dubbed methlib and saved as a .ts file on my computer, contains a plethora of classes, interfaces, functions, and more that I frequently use and prefer to keep in one convenient location. The dilemma I face now is how to utilize these functions and elements in another TypeScript project I'm working on (as one typically would with a library). In the past, before converting it to TypeScript, I could easily include it in the HTML file by directly referencing the local file in my main web directory, enabling any changes to take immediate effect. However, now that I've transitioned to TypeScript, I find myself at a loss. As a newcomer to TypeScript and advanced JavaScript and web development terminologies, I struggle to grasp the concept.
import { Collider } from "Methlib/methlib"Despite my webpack configuration (largely borrowed from a template and not fully comprehended) structured as follows
const path = require('path');
module.exports = {
entry: "./src/script.ts",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".js"],
alias: {
Methlib: "./../Methlib-js/"
}
},
module: {
rules: [{ test: /\.ts$/, loader: "ts-loader" }]
}
}
accompanied by a file layout:
<root>
| Methlib-js
| | methlib.ts
| <project folder>
| | node_modules
| | src
| | | script.ts
| | webpack.config.js
| | package.json
| | package-lock.json
Upon executing >node_modules\.bin\webpack, I encounter an error:
ERROR in <root>\<project folder>\src\script.ts
./src/script.ts
[tsl] ERROR in <root>\<project folder>\src\script.ts(5,26)
TS2307: Cannot find module 'Methlib/methlib' or its corresponding type declarations.
Please respect the usage of <root> and <project folder> as placeholders to conceal my exact file structure when it's not essential. It's important to note that <root> is not a component of the project but simply signifies the root of my file hierarchy.