使用Node和express时找不到Jquery答案

【问题标题】：Jquery not found when using Node and express使用Node和express时找不到Jquery
【发布时间】：2016-01-06 09:07:53
【问题描述】：

我在堆栈上查看了一些类似的问题（例如 this），但它们似乎都没有帮助我，即使我的问题看起来很相似。

我是节点和服务器端脚本的新手，不希望使用更多的框架/组件。

我有一个完全用 javascript (jquery) 编写的绘图应用程序，我想使用 node 作为我的后端来托管它。

我的文件夹结构是这样的：

├── README.md
├── app.js
├── css
├── db.js
├── model.js
├── package.json
├── public
│   ├── css
│   │   └── simple.css
│   └── js
│       ├── jquery.min.js
│       └── testjs.js
├── route.js
├── schema.sql
├── schema_macaronic.sql
├── node_modules +
└── views
    ├── 404.jade
    ├── index.jade
    ├── signin.jade
    └── signup.jade

我所有的代码都在public/js/testjs.js。 testjs.js 使用 jquery、underscore 和其他一些 js 库。我想在 index.jade、signin.jade 等视图中调用此文件中的函数。

我的app.js 中有以下行

app.use(express.static(path.join(__dirname, 'public')));    
app.use('/jquery', express.static(path.join(__dirname, '/public/js')));

在signin.jade 我看起来像这样：

doctype html
html(lang='en')
    head
        link(rel='stylesheet', href='/css/simple.css')
        script(type="type/javascript",src="/jquery/jquery.min.js")
        //script(type="type/javascript",src="js/testjs.js")
        title #{title}
    body
        script.
            $(document).ready(function() {
                console.log('hello form js and jquery')
            });
        h2 Sign In Form
        form(method='post', action='/signin')
            p
                label(for='username') username
                input#username(type='text', name='username', placeholder='username', required='true')
            p
                label(for='password') password
                input#password(type='text', name='password', placeholder='password', required='true')
            p
                input#signin(type='submit', name='signin', value='sign in')
                a(href='/signup', title='register') register

当我到达索引页面时，我看到了 Uncaught ReferenceError: $ is not defined 在第 10 行 ($(document).ready(function())

我做错了什么？整个项目在github上here。

注意：css 正在工作（颜色根据public/css/simple.css 中的 css 变为红色。

另外，我需要更多的，不仅仅是客户端的 jquery，我有大约 2-3 个要在客户端运行的 js 文件，我怎样才能让它们也对客户端视图可见？

【问题讨论】：

标签： jquery node.js express

【解决方案1】：

在app.js 中，改变行：

app.use(express.static(path.join(__dirname, 'public')));    
app.use('/jquery', express.static(path.join(__dirname, '/public/js')));

收件人：

app.use(express.static(__dirname + '/public'));

这样就可以访问所有的css和js文件了。

Jade 文件（您的代码中的jquery 路径错误）：

link(rel='stylesheet', href='/css/simple.css')
script(type="type/javascript",src="/js/jquery.min.js")

【讨论】：

报错Uncaught ReferenceError: $ is not defined不代表jquery没有加载，可能是jquery的版本（有些功能在不同版本中不起作用）或者库的加载顺序，有些像这样：stackoverflow.com/questions/2075337/…
对于任何外部 js 文件，我都会遇到相同的错误。例如，在我的代码中，我有一个名为“somefunc”的函数的“/js/testjs.js”。我得到“未捕获的 ReferenceError” : somefunc 没有定义'如果我从玉中调用它。

【解决方案2】：

你应该只使用

script(type="type/javascript",src="/js/jquery.min.js")

并摆脱这一行：

app.use('/jquery', express.static(path.join(__dirname, '/public/js')));

【讨论】：

添加了 '/' 它仍然不起作用。我仍然遇到同样的错误。
/js/jquery.min.js 和 /jquery/jquery.min.js 都给出相同的错误。此外，它不仅限于 jquery...任何外部 js 文件对玉不可见。
尝试删除我的答案底部的行app.use...等
您能告诉我们http://localhost:{port-you-use}/js/jquery.min.js 在您的浏览器中返回的内容吗？
还是不行我加了 '/' app.use(express.static(__dirname + '/public'));

【解决方案3】：

好的，这与doctype html 和html(lang='en') 有关，删除它似乎可以使它工作。（有意义，因为它不是 html？）

新玉观：

doctype
html
    head
        title #{title}
        link(type='text/css', rel='stylesheet', href='/css/simple.css')
        script(type='text/javascript', src='/js/jquery.min.js')
        script(type='text/javascript', src='/js/testjs.js')
    body
        script.
            $(document).ready(function() {
                console.log('hello form js and jquery')
                helloinfile('adi')
            });
        h2 Sign In Form

        form(method='post', action='/signin')
            p
                label(for='username') username
                input#username(type='text', name='username', placeholder='username', required='true')
            p
                label(for='password') password
                input#password(type='text', name='password', placeholder='password', required='true')
            p
                input#signin(type='submit', name='signin', value='sign in')
                a(href='/signup', title='register') register

我可以看到来自console.log 和helloinfile 的控制台消息。完整代码在github更新。

【讨论】：