Estoy intentando importar una biblioteca (jointjs) en una aplicación Vue. Se asigna como una propiedad global en Vue y posteriormente se modifica. Aquí hay una reproducción simple de lo que estoy tratando de hacer:
import Vue from 'vue'; import * as joint from 'jointjs'; import App from '@/App.vue'; // we need to get our own connectors let customConnectors={ f: function() {} } Vue.use({ install: function (Vue) { // In development, this works: // _.assign(joint.connectors, customConnectors); // as does this: // _.each(customConnectors, (item, key) => { joint.connectors[key] = item;}); // and this: // for (const connector in customConnectors) { // joint.connectors[connector] = customConnectors[connector]; // } // but none of those work in production, saying joint is a constant or not extensible // this one gives a build error about f not being exported by jointjs/src/connectors // joint.connectors['f'] = customConnectors['f']; // this one gives the same error but runs without error; but only when minified, so I think it's actually // just removing the statement joint.connectors.f = customConnectors.f; Vue.joint = joint; } }); let app = new Vue({ joint, render: h => h(App) }).$mount('#app');Cada uno de los ejemplos en los comentarios anteriores funciona bien en desarrollo. Ninguno de ellos funciona cuando se construye para la producción.
El problema parece estar en la producción, la importación de jointjs se trata como una constante, pero en el desarrollo no lo es.
Esta es mi configuración de vite:
import { defineConfig } from 'vite'; import { createVuePlugin } from 'vite-plugin-vue2'; import ViteComponents from 'vite-plugin-components'; import path from 'path'; export default defineConfig({ plugins: [ createVuePlugin(), ViteComponents({ }) ], server: { port: 8080 }, resolve: { alias: [ { find: '@', replacement: path.resolve(__dirname, 'src') } ] }, build: { chunkSizeWarningLimit: 600, } });¿Es este un comportamiento intencional? ¿Hay alguna opción de compilación que me esté faltando?
Aquí hay un repositorio de reproducción si es útil: https://github.com/dovrosenberg/vite-test
¡Gracias!
Gracias a las sugerencias de Estus Flask en los comentarios, logré hacer que esto funcione.
Usé rollup para convertir jointjs en un módulo ES primero.
npm i --save-dev rollup-plugin-commonjs
El paquete acumulativo ya debería estar instalado porque vite lo usa.
Creé un archivo rollup.config.js en la raíz del proyecto:
import commonjs from 'rollup-plugin-commonjs'; export default { input: 'node_modules/jointjs/joint.mjs', output: { file: 'src/plugins/jointjsESM.js', format: 'es', freeze: false, // this is key to preventing everything from being constant }, plugins: [ commonjs({ // search for files other than .js files (must already // be transpiled by a previous plugin!) extensions: [ '.js', '.mjs' ], // Default: [ '.js' ] // if true then uses of `global` won't be dealt with by this plugin ignoreGlobal: false, // Default: false // if false then skip sourceMap generation for CommonJS modules sourceMap: false, // Default: true }), ], }; El valor de output.file de salida puede apuntar a donde desee que esté el módulo resultante.
Luego puede crear el script package.json (o usar npx) para ejecutar rollup --config rollup.config.js
Eso creará el nuevo archivo de módulo en la ubicación de archivo de salida. Puede ejecutar este script antes de vite build como parte de una canalización de compilación.
Luego, en lugar de import * as joint from 'jointjs' , importa desde el archivo que se generó, pero necesita ensamblar el objeto conjunto usted mismo usando las piezas que necesita ... por ejemplo:
import { g, dia, shapes, connectors, } from '@/plugins/jointjsESM.js'; let joint = { g, dia, shapes, connectors};También puede mover jointjs para que solo se instale como una dependencia de desarrollo, ya que no se usa como parte de la compilación.