如何在 nodejs 中使用 MaterializeCSS？答案

【问题标题】：How to use MaterializeCSS in nodejs?如何在 nodejs 中使用 MaterializeCSS？
【发布时间】：2016-06-14 23:02:47
【问题描述】：

我已经运行了以下命令：

npm install materialize-css --save
npm install hammerjs --save
npm install jquery --save

然后在我的app.js，var materialize = require('materialize-css');

但是当我运行npm start 时总是会遇到同样的错误：

/Users/myname/code/websites/n-website/node_modules/materialize-css/bin/materialize.js:1
eof require?$=require("jquery"):$}jQuery.easing.jswing=jQuery.easing.swing,jQu
                                                                    ^
TypeError: Cannot read property 'swing' of undefined
    at Object.<anonymous> (/Users/nyname/code/websites/n-website/node_modules/materialize-css/bin/materialize.js:1:195)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/myname/code/websites/n-website/app.js:9:19)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

我找不到其他人遇到这些问题，所以这一定是我尝试使用 MaterializeCSS 的方式。我究竟做错了什么？我只想能够使用materialize.toast("Message sent", 5000); 显示失败吐司。没什么特别的。

【问题讨论】：

标签： node.js materialize

【解决方案1】：

Materializecss 是 gui / 网站的前端框架，而不是您的服务器端 js 应用程序

【讨论】：

那为什么还要让你通过npm安装呢？
他们将它用作包管理器，因此您可以轻松获取所有源文件。您还可以使用 bower 代替 npm 或从 cdn 加载文件。您也可以通过 npm 下载引导程序。 stackoverflow.com/questions/26773767/…
您肯定可以使用 npm 安装 materialize，但这既不是您的问题的重点，也不是我的回答的重点。您要求在服务器端代码中显示通知。（“我只是希望能够使用 materialize.toast() 显示失败的 toast ”），而提到的代码用于客户端通知。您需要向浏览器发送消息并在那里使用 toast()。
不知道为什么这篇文章被否决了！但它可以发表评论。
您可以在带有 Electron 的 Windows 应用中使用 NodeJS，它是带有 JQuery 的前端应用

【解决方案2】：

您是否也明确需要 jQuery？在 materialize-css 之前呢？

【讨论】：

是的。这些错误只是来自运行“npm start”。我什至还没有尝试使用它。

【解决方案3】：

我在node_modules/jquery/README 文件中找到了以下内容：

节点

要在 Node 中包含 jQuery，首先使用 npm 安装。

npm install jquery

要让 jQuery 在 Node 中工作，需要一个带有文档的窗口。由于 Node 中不存在这样的窗口，因此可以通过 jsdom 等工具来模拟。这对于测试目的很有用。

require("jsdom").env("", function(err, window) { if (err) { console.error(err); return; } var $ = require("jquery")(window); });

希望对你有所帮助。

【讨论】：

【解决方案4】：

Materializecss 是 gui / 网站的前端框架，而不是您的服务器端 js 应用程序。您不能在服务器端 node.js 上编写 Materialize 内容。您必须在要实现的 html 文件上链接实现 css 文件和实现 js 文件。您可以从以下链接下载具体化 css 和 js 文件。

Get started with materialize-css 可能对您有用。 Tutorialspoint environment setup can be useful for your reference.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
  <head>
    <title>Sample materialization</title>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <!--materialize.css from my website directory stylesheets/-->
    <link type="text/css" rel="stylesheet" href="stylesheets/materialize.css"  media="screen,projection"/>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  
  
  <body>

    <!--Import jQuery before materialize.js-->
    <!--Import materialize.js from my website directory materialization-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="materialization/materialize.js"></script>
  
    <!--simple materialized division-->
    <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
    
  </body>
</html>

【讨论】：

【解决方案5】：

如果您使用车把，您通常可以通过位于 layouts 文件夹中的 main.handlebars 文件中的标记调用 Materialize.css，只需在 app.js 中设置您的静态文件调用即可。

在 app.js 中：app.use (express.static ('public'))

在 main.handlebars 中：link rel = "stylesheet" href = "css / materialize.min.css"

配置好后，静态文件夹，href获取如下路径public/css/materialize.min.css

这是 node.js 中的一个项目链接，其中包含 materialize：

rmidia.herokuapp.com

【讨论】：

【解决方案6】：

使用 Vanilla Javascript 而不是使用 jquery 来启动 Materialize 组件，它会起作用。

【讨论】：

【解决方案7】：

有点晚了。但是您可以使用 CDN。入门现在有它的说明。 https://materializecss.com/getting-started.html

【讨论】：