Angular2 Rollupjs

Angular2 Rollupjs,angular,rxjs,rollupjs,Angular,Rxjs,Rollupjs,我正在尝试使用RollupJS捆绑我的Angular2应用程序,但我遇到了一些问题: 找不到我的AppComponent引用的css文件,并引发错误 使用“angular”插件转换/demo-app.ts时出错:enoint:没有这样的插件 文件或目录,打开/demo-app.css 为了解决这个问题,我编写了一个gulp任务,将我的scss文件编译成css。但我的印象是罗洛普能够做到这一点 rxjs模块导致我出错 Module/node_modules/rxjs/observable/of.j

我正在尝试使用RollupJS捆绑我的Angular2应用程序,但我遇到了一些问题:

  • 找不到我的AppComponent引用的css文件,并引发错误
  • 使用“angular”插件转换/demo-app.ts时出错:enoint:没有这样的插件 文件或目录,打开/demo-app.css

    为了解决这个问题,我编写了一个gulp任务,将我的scss文件编译成css。但我的印象是罗洛普能够做到这一点

  • rxjs模块导致我出错
  • Module/node_modules/rxjs/observable/of.js不导出(由/@angular/router/src/apply_redirects.js导入)

    我曾尝试使用rollup插件别名并编写一个特定的resolveRxJS函数来修复这个问题,但没有成功

    const babel = require('rollup-plugin-babel');
    const eslint = require('rollup-plugin-eslint');
    const commonjs = require('rollup-plugin-commonjs');
    const typescript = require('rollup-plugin-typescript');
    const angular = require('rollup-plugin-angular');
    const alias = require('rollup-plugin-alias');
    const resolve = require('rollup-plugin-node-resolve');
    const progress = require('rollup-plugin-progress');
    const postcss = require('rollup-plugin-postcss');
    
    export default {
        entry: 'src/demo-app/main.ts',
        dest: 'dist/demo-app/bundle.min.js',
        format: 'iife',
        sourceMap: 'inline',
        plugins: [
            {
                resolveRxJS: id => {
                    if (id.startsWith('rxjs/') || id.startsWith('rxjs\\')) {
                        let result = `${__dirname}/node_modules/rxjs-es/${id.replace('rxjs/', '')}.js`;
                        return result.replace(/\//g, "\\");
                    }
                }
            },
            angular(),
            typescript({
                typescript: require('typescript'),
                tsconfig: tsOptions
            }),
            //alias({
            //    rxjs: __dirname + '/node_modules/rxjs'
            //}),
            babel({
                exclude: '/node_modules/**',
                include: '/node_modules/tslint-no-unused-var/**',
                // include: '/node_modules/rxjs/**'
            }),
            resolve({
                module: true,
                jsnext: true
            }),
        ]
    }
    
    注释掉的代码是我尝试过的其他东西。注意:我也尝试过在rollup插件angular函数中使用预处理器,它也没有编译我的css

    因此,概括一下1)在运行汇总代码之前,我是否总是必须使用gulp编译我的scss文件?2) 如何解决rxjs模块问题


    谢谢

    检查我的工作repo,启用汇总的aot构建,

    我通过添加汇总插件commonjs模块并包括rxjs节点模块库,成功地实现了这一点

    commonjs({
        include: 'node_modules/rxjs/**',
    ), 
    

    实际上,我在您的代码中遇到了一个类似的错误:我确信我的示例是有效的,它可能是由一些库引起的。它现在对你有用吗?@BradBeighton它是由
    rxjs:~5.2.0
    引起的,请使用
    rxjs:~5.1.1