通过Rollup将牵引负载与牵引负载捆绑在一起

Question

将ractive和ractive load导入我的汇总项目的正确方法是什么？npm还是github？

目前我正在使用npm安装每一个：

npm install --save-dev ractivejs/ractive

和

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

我使用rollup-plugin-commonjs和rollup-plugin-node-resolve来相应地捆绑它们（问题末尾的rollup.config.js）：

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

但实际加载似乎也在其代码中导入了其他模块，导致了这个错误：

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

我如何正确使用Rollup，哪些是适合这种情况的来源（npm或github）？

---

这是我的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旨在"读取"浏览器中的link标记，然后对组件文件进行AJAX请求，然后使用名为rcu的库将组件文件转换为可用的javascript组件。

您需要的是一个实用程序（使用rcu或执行等效工作），将组件文件转换为javascript文件，您可以在构建过程中运行这些文件，然后将其移交给rollup。幸运的是，看起来有一个汇总插件rollup-plugin-ractive可以做到这一点：

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(...)

这里还列出了一些可用的加载程序，其中也有"普通的js"变体。