ES6 - Browserify + babel + Flot 图表插件答案

【问题标题】：ES6 - Browserify + babel + flot chart pluginES6 - Browserify + babel + Flot 图表插件
【发布时间】：2016-06-06 20:35:49
【问题描述】：

我正在尝试使用浮点图表作为节点依赖项，并使用 bable 和 browserify 将所有内容捆绑在我的应用程序中。

仅使用 import 'flot';

我还想使用 flot 可以处理的其他类型的图表，例如饼图。

flot node_modules 文件夹下有jquery.flot、jquery.flot.pie 等，jquery.flot 被导入并绑定。但是我可以 jquery.flot.pie 不是。像 import 'flot.pie' 这样的导入语句也不起作用。我也在使用 gulp 来构建应用程序。

有人有什么建议吗？我对 node babel 和 browserify 比较陌生。

这是我在 package.json 中的 browserify 设置

"browserify-shim": {
"bootstrap": {
  "depends": [
    "jquery:jQuery"
  ]
 }
},
"browserify-swap": {
"@packages": [
  "underscore"
],
"dist": {
  "underscore.js$": "lodash"
}
},
"browserify": {
"transform": [
  "babelify",
  [
    "hbsfy",
    {
      "extensions": [
        "hbs"
      ]
    }
  ],
  "browserify-swap",
  "browserify-shim"
]
}

【问题讨论】：

标签： javascript ecmascript-6 browserify flot babeljs

【解决方案1】：

我可以通过将 flot.pie 插件的引用放在 package.json 中来解决这个问题。

 browser": {
  "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
  "flot.pie":"./node_modules/flot/jquery.flot.pie"
},

现在我可以使用import 'flot'; 并导入'flot.pie';

【讨论】：