带有 gulp 的 Angular 2 相对路径包答案

【问题标题】：angular 2 relativepath bundle with gulp带有 gulp 的 Angular 2 相对路径包
【发布时间】：2017-03-15 07:07:43
【问题描述】：

我正在使用 Spring 4.3.5.Release 开发 Web 应用程序。我在前端使用 angular 2。在组件内部，我按照此处的指南使用了 templateURLs 和 StyleURLs 的相对路径

Component-relative Paths

但是我对如何使用 gulp 捆绑这个项目结构感到困惑，因为我们将所有与组件相关的文件（html、css、ts）等放在同一个文件夹中。

我会创建一个使用 gulp 编译 js 文件的缩小版本，但是我如何维护这个结构的相对路径。

如果有人可以提供帮助，我会很高兴。

【问题讨论】：

标签： angular gulp bundle relative-path

【解决方案1】：

在使用ngc 编译并与rollup 捆绑之前，使用gulp-inline-ng2-template 插件内联CSS 和HTML：

用NGC编译：

gulp.task('compile:aot', function (cb) {
  exec('"node_modules\\.bin\\ngc" -p tsconfig.prod.json', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
});

编译为 ES6 模块格式（通过 rollup 进行 tree-shaking 的先决条件）：

gulp.task('compile:es6', function () {
  return gulp.src(['./src/**/*.ts'])
    .pipe(inlineNg2Template({ base: '/src', useRelativePaths:true }))
    .pipe(tsc({
      "target": "es5",
      "module": "es6",
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "lib": ["es6", "dom"]
    }))
    .pipe(gulp.dest('./dist/src'));
});

与汇总捆绑：

gulp.task('rollup:app', function(){
  return rollup.rollup( {
    entry: 'dist/src/main.aot.js',
    onwarn: function (warning) {
      // Skip certain warnings

      // should intercept ... but doesn't in some rollup versions
      if (warning.code === 'THIS_IS_UNDEFINED') { return; }
      // intercepts in some rollup versions
      if ( warning.message.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }

      // console.warn everything else
      console.warn(warning.message);
    },

    plugins: [
          nodeResolve({
            jsnext: true,
            module: true
          }),
          commonjs({
              include: 'node_modules/rxjs/**',
          })
    ]
  })
  .then(function(bundle) {
      bundle.write( {
        format: "iife",
        dest: "dist/app.bundle.js",
        sourceMap: true
      });
  });
});

Demo Starter App

【讨论】：

成功了！！谢谢你。我从来不知道有 gulp-inline-ng2-template 插件。太好了！！
一个问题。由于我们使用 NGC，我们不需要 typescript 插件来编译，对吧。
ngc 用于生成静态编译所需的工厂。在创建工厂后仍然需要 tsc 以在通过汇总捆绑和摇树之前编译为 es6 格式。您也许可以单独使用 ngc 输出到 es6 - 我认为它应该可以工作。
感谢您的澄清。对这两个编译器感到困惑。非常感谢您的入门应用程序。这对像我这样的初学者真的很有帮助。
sure np:) 查看输出为 UMD、AMD 和 CJS 模块格式的功能模块构建。您将能够将功能模块部署到 NPM 并在多个应用程序中重复使用。