我正在尝试使用 RollupJS 捆绑我的 Angular2 应用程序，但我遇到了一些问题：
- 找不到我的 AppComponent 引用的 css 文件并引发错误。
使用 'angular' 插件转换 /demo-app.ts 时出错：ENOENT：没有这样的文件或目录，打开 /demo-app.css
为了解决这个问题，我编写了一个 gulp 任务来将我的 scss 文件编译为 css。但我的印象是 Rollup 能够做到这一点。
- 一个 rxjs 模块导致我出错。
模块 /node_modules/rxjs/observable/of.js 不导出（由 /@angular/router/src/apply_redirects.js 导入）
我尝试使用 rollup-plugin-alias 并编写一个特定的 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-plugin-angular 函数中使用预处理器，它也没有编译我的 css。
所以回顾一下 1) 在运行汇总代码之前，我是否总是必须使用 gulp 编译我的 scss 文件？2) 如何解决 rxjs 模块问题？
谢谢