Zurb Foundation 6 不适用于 Codeigniter

Question

我目前在 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)

Answer 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 下载正常。

Zurb Foundation 6 不适用于 Codeigniter

Zurb Foundation 6 not working on Codeigniter

html

css

codeigniter

zurb-foundation

zurb-foundation-6