0
202
VistasWhy is webpack not including my function in my ts file
I have made a fresh blazor serverside app. And I have created a tsconfig.json and JS/src folder in my project folder. In Terminal, I have used npm init -y in my JS folder. Node modules can now be installed. I installed webpack and created a webpack.config.js file in my JS folder. Then I create a simple ts file with an alert function. After configuring my tsconfig.json in my project root, I added <script src="js/bundle.js"></script> to my _Layout.cshtml. And then in my index.cshtml page I added a button and some code to call the compiled bundle.js from webpack, located in wwwroot/js/.
I cannot see the function in my bundle.js file. What have I done wrong?
Folder structure:
tsconfig.json:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "ES2017",
"moduleResolution": "Node"
},
"exclude": [
"node_modules"
],
"include": [
"./JS/src/*.ts"
]
}
webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude:/node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../wwwroot/js'),
},
};
index.ts:
function showAlert() {
alert("this is a test");
}
package.json:
{
"name": "js",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^9.2.6",
"typescript": "^4.5.5",
"webpack-cli": "^4.9.2"
}
}
1 Respuestas
Responde la pregunta0
Ok so after some struggling I figured out that I need to expose the function as a library.
In webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude:/node_modules/,
},
],
},
resolve: {
extensions: ['', '.js', '.ts']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../wwwroot/js'),
libraryTarget: 'umd',
library: 'EntryPoint'
},
};
Take note of the library and library target in the output section. I am not entirely sure whether var umd const or let is better for the library target, as I am not sure what UMD is. however it seems to work with either.
Here is my updated index.ts file:
import { Calculator } from "./calculator";
export function showAlert() {
console.log("Hello world");
alert("this is a test");
}
export let foo = new Calculator();
let bar = new Calculator();
Notice how foo and showAlert have export in front. This is required. Bar is not accessible.