Estoy codificando una biblioteca TS que exporta un objeto como este:
export const MyLibName: SDKExport = { ... }Esta biblioteca se distribuirá en npm y quiero que otros puedan importarla independientemente de su configuración, es decir, debería poder usarse de las siguientes maneras:
// ES6 import { MyLibName } from './myLib'; // CommonJS const { MyLibName } = require('./myLib'); // Browser <script src="https://cdn.jsdelivr.net/npm/myLib/dist/dist.min.js"></script> <script console.log(MyLibName) </script> La parte del navegador está demostrando ser la más complicada, ya que requiere "contaminar" el espacio de nombres global con el objeto MyLibName . Puedo hacer eso, pero no tengo claro cómo hacerlo de una manera que no contamine el espacio de nombres global al importar la biblioteca explícitamente usando CommonJS/ES6.
Aquí está mi tsconfig.json:
{ "compilerOptions": { "lib": ["ES2019"], "module": "es6", "target": "es5", "moduleResolution": "node", "noUnusedLocals": true, "noUnusedParameters": true, "sourceMap": true, "outDir": "build", "strict": true, "noImplicitAny": true, }, "include": ["./**/*.ts"], "exclude": ["node_modules", ".vscode", "test"] }Está claro que el script que está importando en el navegador debe ser diferente a su importación CommonJS/ES6 si desea que uno contamine el espacio de nombres global pero no el otro. Simplemente cree un archivo como este y use su paquete en él para crear una "compilación de navegador" de su biblioteca:
import { MyLibName } from './myLib'; window.MyLibName = MyLibName;(Parece que ya tiene un paquete/minificador en su proyecto, por lo que no entraré en detalles sobre cómo configurarlos).
Intenté usar el enfoque sugerido por Vojtěch Strnad con browserify , pero encontré problemas que eran difíciles de depurar debido a todo el código adicional que browserify agrega a los archivos exportados. Acepto esa respuesta ya que es la correcta para bases de código complejas.
Para mi propio proyecto, que solo incluye un archivo, descubrí que funcionaba bien exportar el código TS usando el "module": "ES6" Opciones del compilador TS y ejecutar sed -i 's/\export //g' dist/index.js para eliminar la palabra clave de export . De esa forma, el archivo exportado simplemente tiene const MyLibName = { ... } y, por lo tanto, agrega el objeto al espacio de nombres global.