Question

我运行了以下命令：

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)

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

Answer 1

您是否明确要求jQuery？在物化css之前呢？

Answer 2

我在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); });

希望对你有所帮助。

Answer 3

Materialisecss是gui / website的前端框架，而不是服务器端js应用程序的前端框架。您无法在服务器端node.js上编码Materialise内容。您必须在要实现的html文件上链接materialize css文件和实现js文件。你可以从下面的链接下载materialization css和js文件。

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

＆＃13;

<!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>

＆＃13;

Answer 4

使用Vanilla Javascript初始化Materialize组件，而不使用jquery，它将起作用。

Answer 5

有点晚。但是您可以使用CDN。现在，《入门指南》具有相关说明。 https://materializecss.com/getting-started.html

Answer 6

Materialisecss是gui / website的前端框架，而不是服务器端js应用程序

如何在nodejs中使用MaterialiseCSS？

6 个答案:

节点