Búsqueda de sitios web

javascript - Importación de módulos AMD que no usan exports con TypeScript


El escenario

Estoy intentando cargar módulos AMD existentes con TypeScript.

Para demostrar mi problema, aquí hay un archivo app.ts que carga un módulo AMD llamado my_amd_module.js:

// app.ts

import * as amd_func from './my_amd_module';

function main(): void {
  console.log(amd_func());
}

main();

Se utiliza la siguiente configuración de TypeScript:

// tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "allowJs": true,
    "outDir": "build",
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "build"
  ]
}

Y estoy usando Webpack para empaquetar el archivo app.ts en un paquete llamado app-bundle.js que puede ser ejecutado por un navegador:

// webpack.config.js

'use strict';

const webpack = require('webpack');
const path = require('path');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: './app.ts',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app-bundle.js'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.ts', '.js']
  },
  module: {
    loaders: [
      {test: /\.ts$/, loader: 'ts-loader'}
    ]
  }
};

La versión funcional

Cuando el my_amd_module.js se ve como sigue, todo funciona bien. Nota que estoy haciendo referencia a 'module' como una dependencia y vinculo la función foo a su propiedad exports, lo cual es una de las formas posibles de usar AMD.

// my_amd_module.js

define(['module'], function(module) {
  function foo () {
    return 'Hello from AMD!';
  }

  module.exports = foo;
});

La versión que no funciona

Pero cuando estoy usando la sintaxis alternativa de definir un módulo AMD con un valor de retorno en lugar de asignar a exports

// my_amd_module.js

define(function() {
  function foo () {
    return 'Hello from AMD!';
  }

  return foo;
});

entonces el compilador de TypeScript se queja con el siguiente mensaje:

ERROR in ./app.ts
(1,27): error TS2306: File '/[...]/src/my_amd_module.js' is not a module.

Pero el archivo app-bundle.js todavía se genera y todo funciona en el navegador.

La sintaxis alternativa que estoy utilizando en este caso está, por ejemplo, descrita por RequireJS o en la propia especificación de AMD.

Mi pregunta

¿No son compatibles con TypeScript los módulos AMD que definen su valor exportado con un valor de return en lugar de asignar a exports? ¿Es esta la razón por la que el compilador se queja? ¿Y por qué se compila todo, a pesar de esta queja?

Respuesta #1

¿No son compatibles con TypeScript los módulos AMD que definen su valor exportado con un valor de retorno en lugar de asignarlo a exports?

Sí. Aparentemente no se detecta como un módulo externo y se infiere como global y, por lo tanto, no se permite que se require. Por favor, cree un problema aquí: https://github.com/Microsoft/TypeScript/issues

Artículos relacionados