通过Rollup捆绑ractive-ractive

时间:2016-04-12 22:58:07

标签: npm bundle ractivejs rollupjs ractive-load

ractive ractive-load 导入汇总项目的正确方法是什么? npm或github?

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

npm install --save-dev ractivejs/ractive

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

我正在使用rollup-plugin-commonjsrollup-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'
};

1 个答案:

答案 0 :(得分: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(...)

还有一些可用的加载器here的列表,其中还包括“普通的vanilla js”变体。