Babel 破坏了其他 javascript 插件/框架答案

【问题标题】：Babel breaks other javascript plugins/frameworksBabel 破坏了其他 javascript 插件/框架
【发布时间】：2016-11-16 18:31:30
【问题描述】：

我正在使用 Zurb 基金会框架。当我在 src/assets/js 文件夹中放置一个 JavaScript 框架（例如 snap.svg）时，它会自动编译到 app.js 文件中。到目前为止，我尝试使用的一个 jQuery 插件已经损坏，并且 snap.svg 也损坏了。我假设这与 babel 有关。例如使用 snap.svg 我得到以下错误..

snap.svg.js:420 Uncaught TypeError: Cannot set property 'eve' of undefined

我尝试将 snap.svg 的路径放在 config.yml 文件中，但除了 snap.svg 在 app.js 中的位置之外，这似乎没有任何区别

我假设我只是没有做正确的事情。有什么想法吗？

【问题讨论】：

你使用的是什么构建系统，你是如何配置 Babel 来运行它的？
我正在使用 Zurb 模板，它使用 npm、gulp、babel 等。无论默认设置是什么，我都在使用。
在无法看到实际代码的情况下，我最好的猜测是它会在框架上自动运行 Babel，期望它们是单独的 ES6 模块，但事实并非如此。我对框架一无所知，所以我不能提供更多，抱歉。

标签： zurb-foundation babeljs zurb-foundation-6

【解决方案1】：

你可以通过在构建过程中传递 'ignore' 标志来告诉 babel 不要编译特定的代码片段。例如：

function javascript() {
  return gulp.src(PATHS.javascript)
  .pipe($.sourcemaps.init())
  .pipe($.babel({ignore: ['src/assets/js/snap.svg']}))
  .pipe($.concat('app.js'))
  .pipe($.if(PRODUCTION, $.uglify()
    .on('error', e => { console.log(e); })
  ))
  .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
  .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

您可以在此论坛帖子中查看有关自定义构建过程的更多信息：http://foundation.zurb.com/forum/posts/36974-enhancing-foundation-with-bower-components

【讨论】：