0
197
Vistas¿Por qué el paquete web no incluye mi función en mi archivo ts?
He creado una nueva aplicación de servidor blazor. Y he creado una tsconfig.json y JS/src en mi carpeta de proyecto. En Terminal, he usado npm init -y en mi carpeta JS. Ahora se pueden instalar módulos de nodo. Instalé webpack y creé un archivo webpack.config.js en mi carpeta JS. Luego creo un archivo ts simple con una función de alerta. Después de configurar mi tsconfig.json en la raíz de mi proyecto, agregué <script src="js/bundle.js"></script> a mi _Layout.cshtml. Y luego, en mi página index.cshtml, agregué un botón y un código para llamar al bundle.js compilado desde el paquete web, ubicado en wwwroot/js/.
No puedo ver la función en mi archivo bundle.js. ¿Qué he hecho mal?
Estructura de carpetas:
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'), }, };índice.ts:
function showAlert() { alert("this is a test"); }paquete.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, después de algunas dificultades, descubrí que necesito exponer la función como una biblioteca.
En 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' }, };Tome nota de la biblioteca y el destino de la biblioteca en la sección de salida. No estoy completamente seguro de si var umd const o let es mejor para el objetivo de la biblioteca, ya que no estoy seguro de qué es UMD. sin embargo, parece funcionar con cualquiera de los dos.
Aquí está mi archivo index.ts actualizado:
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();Observe cómo foo y showAlert tienen export al frente. Esto es requerido. El bar no es accesible.