通过 Rollup 将 ractive 与 ractive-load 捆绑在一起

Question

将 ractive 和 ractive-load 导入我的 rollup 的正确方法是什么项目？ 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';
...

但是好像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的目的是在浏览器中"read"link标签然后对组件文件做AJAX请求，然后它使用一个名为[=17的库=] 将组件文件转换为可用的 javascript 个组件。

您需要的是一个实用程序（使用 rcu 或做同等工作）将您的组件文件转换为 javascript 文件，您可以在构建过程中运行然后手动关闭到 rollup。幸运的是，看起来有一个 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(...)

还有一些可用加载器的列表 here，其中还有 "plain vanilla js" 个变体。

通过 Rollup 将 ractive 与 ractive-load 捆绑在一起

Bundle ractive with ractive-load through Rollup

bundle

npm

ractivejs

ractive-load

rollupjs