Bundle Ractive mit Ractive-Last durch Rollup

Question

Was ist der richtige Weg Ractive und Ractive Last mein Rollup Projekt zu importieren? Npm oder Github?

Derzeit bin ich mit npm jeden zu installieren:

npm install --save-dev ractivejs/ractive 

Und

npm install --save-dev ractivejs/ractive-load 

Und ich bin mit rollup-plugin-commonjs mit rollup-plugin-node-resolve zu corretly sie zu bündeln (rollup.config.js am Ende der Frage):

import Ractive from 'ractive'; 
import load from 'ractive-load'; 
... 

Aber es scheint, dass Ractive Last auch andere Module in seinem Code importiert, so dass diese Fehlermeldung:

Error parsing /home/.../node_modules/rcu/src/make.js: 'import' and 'export' may only appear at the top level (2:0) in /home/.../node_modules/rcu/src/make.js

Wie kann ich richtig Rollup verwenden und welche sind die richtigen Quellen für diesen Fall (NPM oder Github) Hier

---

ist mein rollup.config.js:

import commonjs from 'rollup-plugin-commonjs'; 
import nodeResolve from 'rollup-plugin-node-resolve'; 

export default { 
    entry: 'src/main.js', 
    plugins: [ 

    nodeResolve({ 
     jsnext: true, 
     main: true, 
     browser: true, 
    }), 

    commonjs({ 
     sourceMap: false 
    }), 

    // uglify() 

    ], 
    format: 'iife', 
    moduleName: 'Altiva', 
    dest: 'altiva.js' 
}; 

Answer 1

ractive-load soll link-Tags im Browser „lesen“ und tun dann AJAX-Anforderungen für die Komponentendatei, dann verwendet es eine Bibliothek rcu genannt zu konvertieren die Komponentendateien in verwendbare Javascript-Komponenten.

Was Sie brauchen, ist ein Dienstprogramm (das rcu oder gleichwertige Arbeit verwendet), um Ihre Komponentendateien in Javascript-Dateien zu verwandeln, die Sie während des Build-Prozesses dann Handover an rollup ausführen können. Glücklicherweise sieht es aus wie ein Rollup-Plugin ist rollup-plugin-ractive entwickelt, um genau das zu tun:

rollup({ 
    entry: 'src/main.js', 
    plugins: [ 
    ractive({ 
     // By default, all .html files are compiled 
     extensions: [ '.html', '.ract' ], 

     // You can restrict which files are compiled 
     // using `include` and `exclude` 
     include: 'src/components/**.html' 
    }) 
    ] 
}).then(...) 

gibt es auch Liste von einigen der verfügbaren Lade here, unter ihnen sind „Plain-Vanilla-js“ sowie Varianten.