Zurb Foundation 6 无法在 Codeigniter 上运行答案

【问题标题】：Zurb Foundation 6 not working on CodeigniterZurb Foundation 6 无法在 Codeigniter 上运行
【发布时间】：2016-03-06 16:05:00
【问题描述】：

我目前在 Codeigniter 上运行 Foundation 5，它可以工作。现在我正在尝试安装不想工作的 Foundation 6 (the CSS version)。

我已经建立了一个名为prova-foundation 的简单页面，这里是代码 (as illustrated here)：

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <?php echo link_tag('css/foundation-6/foundation.css?ver=1.1'); ?>
    <?php echo link_tag('css/foundation-6/app.css?ver=1.1'); ?>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="<?php echo base_url(); ?>js/foundation-6/vendor/jquery.min.js"></script>
    <script src="<?php echo base_url(); ?>js/foundation-6/vendor/what-input.min.js"></script>
    <script src="<?php echo base_url(); ?>js/foundation-6/foundation.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

但我在 Firebug（Firefox 最新版本 44.0.2）中收到以下错误：

SyntaxError: class is a reserved identifier
class AccordionMenu {
foundation.js (linea 1751, col 2)

TypeError: $(...).foundation is not a function
$(document).foundation();
prova-foundation# (linea 16, col 7)

而且 Foundation 不起作用... 所有<script> 和css 链接都是正确的。如果我在浏览器中打开它们中的每一个，就会加载相应的文件。

我的页面有什么问题？ (i've set up a test page here)

【问题讨论】：

您设置了基本网址吗？可能是您在 config.php 上将其留空，并且您是否自动加载了 url helper。
是的。 Codeigniter 配置有效，因为它与我当前运行 Foundation 5 的目录相同。

标签： html css codeigniter zurb-foundation zurb-foundation-6

【解决方案1】：

问题是您包含的foundation.js 文件是用ES6 编写的。在 Foundation 6.2 中，JavaScript 被 ES6 重写。它需要使用Babel 转译成ES5 才能在浏览器中工作。如果您正在下载 CSS 版本，这不是您应该做的事情。这应该在它可供下载之前完成。

我已经打开了issue on GitHub 来解决这个问题。

在解决此问题之前，您必须通过以下两个选项使其正常工作：

从您的foundation.js 文件here 复制并粘贴代码，然后将生成的转译代码复制并粘贴回您的foundation.js 文件并保存。
从http://foundation.zurb.com/sites/download/ 下载Complete 版本，您可以获得转译的foundation.js 和foundation.min.js 文件。 Essential 下载似乎有问题，但 Complete 下载正常。

【讨论】：

我有生以来第一次不觉得自己笨！谢谢