Angular-meteor 与 pbastowski:angular-babel 和 webpack:webpack 冲突

Angular-meteor conflict with pbastowski:angular-babel and webpack:webpack

我正在尝试将 webpack 与我的 angular-meteor 应用程序一起使用。不幸的是,流星构建失败并出现以下错误:

While determining active plugins:
    error: conflict: two packages included in the app (pbastowski:angular-babel and webpack:webpack) are both trying to handle *.js

angular-meteor 包依赖于 pbastowski:angular-babel 以支持 ES2015,而 webpack 使用 babel-loader。知道如何避免这种冲突吗?

这是一条 Meteor 消息,当两个 Meteor 包尝试为同一文件扩展名(在本例中为“.js”)添加 Meteor 编译器插件时将出现该消息。

选项 1

从您的项目中删除 webpack:webpack。你的 Meteor 项目真的需要 webpack 吗? Meteor 为你捆绑了一切,因此,没有必要使用 webpack,就这样。如果您想使用 ES6 模块,请考虑使用 pbastowski:systemjs

    meteor remove webpack:webpack

我不知道你使用 webpack 的原因,但我想我会提到这个选项。

选项 2

您可以通过将以下行添加到 Meteor 项目根文件夹中的 babel.json 来配置 pbastowski:angular-babel 不编译“.js”文件。但是,如果你这样做,Babel 将只编译“.es6.js”文件而不是“.js”文件。

babel.json

{
    "extensions": ["es6.js"]
}

这里有些人试图说 Webpack 没用,但他们真的对此了解不多。

  • 它可以帮助您更好地捆绑资产。
  • 你可以更好地捆绑你的 CSS 甚至有本地 CSS(css 不是全局应用,而是只在你页面的一部分)
  • 您可以进行代码拆分,而不是在第一页加载时提供整个应用程序
  • 您可以在不刷新页面的情况下进行热重载(至少使用 React ;))

你可以一起使用 angular 和 Webpack 没有任何问题。这是您需要做的:

meteor remove angular meteor add angular-meteor-data meteor add angular-templates

唯一缺少的部分是 ng-annotate,幸运的是,有几种方法。您可以在 Webpack 配置文件中使用 ng-annotate-loaderng-annotate-webpack-plugin