[!] Error: Unexpected token
node_modules\axios\package.json (2:9)
1: {
2: "_from": "axios",
^
El mismo error que al importar axios en un proyecto ES6 puro y no haber configurado browser = true para rollup-plugin-node-resolve. Caso de prueba simple: archivo js único que contiene
import axios from "axios";
window.process = window.process || { env: {} };
axios.get("http://httpbin.org/").then(response => console.log("Got length: " + response.data.length));
El uso de rollup.config.js siguiente produce el error, pero al excluir rollup-plugin-typescript2 funciona.
import typescript from 'rollup-plugin-typescript2';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default {
input: 'src/main.js',
output: {
file: 'public/bundle.js',
format: 'iife',
sourcemap: true
},
plugins: [
typescript(),
resolve({ browser: true }),
commonjs()
]
};
¿Podría probar la sugerencia hecha aquí: https://github.com/rollup/rollup-plugin-commonjs/issues/28 (usando rollup-plugin-json)
Gracias, parece funcionar (agregando rollup-plugin-json como complemento).
Sin embargo, el resultado es muy diferente de acumular el archivo .js correspondiente, y la firma iife se convierte en
var SomeName = (function (exports,tty,util,url,http,https,assert,stream,zlib)...
Esperaba que rollup-plugin-typescript2 básicamente ejecutara tsc con mi tsconfig.config como un paso previo al rollup, pero cuando hago eso (primero tsc, luego rollup sin el plugin de mecanografiado) obtengo
var SomeName = (function (exports)...
Probablemente me falte alguna configuración de configuración aquí ..?
¿Se utilizan esos otros parámetros dentro de la función? ¿El cuerpo es el mismo en ambos casos?
Sí, se usan y hay una gran parte adicional, comenzando con
function createCommonjsModule(fn, module) {
en el medio del cuerpo (cuando se usa el complemento mecanografiado en comparación con el uso de js simple como fuente). Mucho parece estar relacionado con la funcionalidad de depuración de Node.
He puesto un repositorio de casos de prueba mínimo aquí .
Mirando su repositorio de prueba, el complemento produce la misma salida que tsc. Puede verificarlo en .rpt2_cache/xxx/code/xxx
file - busque la propiedad code
de json dentro. Eso es lo que se pasa al resumen.
La principal diferencia en 2 resultados es cuando import axios from 'axios';
hace - en los casos de simple js rollup agarra axios/dist/axios.js
- compilación webpaked. En caso de utilizar el complemento axios/lib/axios.js
se resuelve.
La compilación empaquetada en la web es aparentemente la versión del navegador que rollup-plugin-node-resolve
encuentra mágicamente en modo navegador.
Si coloca el complemento de mecanografiado al final de la cadena, el resumen utiliza la resolución de nodos para resolver las importaciones por sí mismo, y todo funciona como se esperaba.
Esta línea en su repositorio de prueba:
tsPluginConf.plugins.splice(tsPluginConf.plugins.length - 1, 0, typescript());
Esta es la primera vez que veo que el orden de los complementos realmente importa :). Actualizaré el archivo Léame.
Probablemente tampoco necesite el complemento json ahora.
@ezolenko Me
Dice:
Must be before this plugin in the plugin list, especially when browser: true option is used, see #66
Creo que estaba pensando dónde pongo el complemento mecanografiado, y luego leí la siguiente línea y pensé que this plugin
se refería a rollup-plugin-node-resolve
.
¡Buen trabajo! Gracias
Arreglado, gracias :)
Comentario más útil
Mirando su repositorio de prueba, el complemento produce la misma salida que tsc. Puede verificarlo en
.rpt2_cache/xxx/code/xxx
file - busque la propiedadcode
de json dentro. Eso es lo que se pasa al resumen.La principal diferencia en 2 resultados es cuando
import axios from 'axios';
hace - en los casos de simple js rollup agarraaxios/dist/axios.js
- compilación webpaked. En caso de utilizar el complementoaxios/lib/axios.js
se resuelve.La compilación empaquetada en la web es aparentemente la versión del navegador que
rollup-plugin-node-resolve
encuentra mágicamente en modo navegador.Si coloca el complemento de mecanografiado al final de la cadena, el resumen utiliza la resolución de nodos para resolver las importaciones por sí mismo, y todo funciona como se esperaba.
Esta línea en su repositorio de prueba:
tsPluginConf.plugins.splice(tsPluginConf.plugins.length - 1, 0, typescript());
Esta es la primera vez que veo que el orden de los complementos realmente importa :). Actualizaré el archivo Léame.