基金会不使用 create-react-app答案

【问题标题】：Foundation not working with create-react-app基金会不使用 create-react-app
【发布时间】：2017-05-18 15:20:43
【问题描述】：

我正在使用 React 和 create-react-app 构建一个应用程序。我想使用 npm 的基础站点。我愿意：

import React, { Component } from 'react';
import jQuery from 'jquery';
import Foundation from 'foundation-sites';

此时即使没有更多代码，我也会收到来自foundation.js 的错误“Uncaught ReferenceError: jQuery is not defined”。通常人们使用 webpack 配置来解决这个问题，但是使用 create-react-app 我无法访问 webpack 配置。我不想做eject。我尝试了其他解决方案，例如here，但没有任何帮助。真的可以通过这种设置使用 Foundation 吗？

【问题讨论】：

标签： javascript jquery reactjs zurb-foundation create-react-app

【解决方案1】：

用下面的代码替换你的代码，它应该可以工作。

import jquery from 'jquery';
window.$ = window.jQuery = jquery;
require('foundation-sites');

【讨论】：

好的，这消除了 jQuery 错误，但现在 Foundation 只是一个空对象。
我觉得可以直接导入foundation.min.css文件。 import 'foundation-sites/dist/css/foundation.min.css'; 如下。 github.com/facebookincubator/create-react-app/issues/201 - 这是包含引导程序的链接。
是的，我知道我可以像那样导入 css，但我需要一些来自 Foundation 的基于 jQuery 的小部件 :-)
好吧，@hmachahary 原来你非常接近 :-) 而不是 var Foundation = require('foundation-sites'); 我只需要在没有变量声明的情况下做 require('foundation-sites');。然后像const modal = new window.Foundation.Reveal(jquery('#error-modal')); 这样的作品
嗨@hmachahary 它工作正常，但问题是当您尝试构建优化版本时，它会失败，例如创建优化的生产构建...无法编译。来自 UglifyJs 的 static/js/main.7d12ffea.js 意外字符'`' [./~/foundation-sites/js/foundation.util.core.js:24,0][static/js/main.7d12ffea.js: 10682,124] 错误命令失败，退出代码为 1。你知道如何在不弹出 babel 配置的情况下构建它吗？

【解决方案2】：

尝试将 jQuery 分配给窗口。最好在入口点文件中完成。

window.jQuery = jQuery;

【讨论】：