2014-12-04 857 views
0

看起来很疯狂,这并不像应该的那么简单。在html中添加一个node_module作为javascript src文件

我的文件结构:

node_modules/ 
public/ 
-- css/ 
-- js/ 
-- index.html 

index.html,我尝试加载一个文件中node_module,像这样:

<script src="../node_modules/angular-ui-sortable/src/sortable.js"></script> 

但是,这是行不通的。我的错误:

SyntaxError: Unexpected Token '<' 

我检查资源,并sortable.js正在加载的index.html内容。当找不到指定的javascript文件时,我看到了这个问题。

这只是nodeJS的一些不可思议的问题?是否有一些黑魔法需要简单地加载一个JavaScript文件到HTML?

+0

你用什么来为你的静态资产提供服务?你在提供node_modules目录吗? – generalhenry 2014-12-04 16:32:05

+0

如果您的节点模块依赖它,请确保包含require.js。许多node_modules不能在浏览器中运行,并且只能在服务器端运行。 – 2014-12-04 16:33:25

+0

我怀疑无论什么服务静态资产设置为docroot在'公共/'这意味着它不会识别任何更高的。也许使用browserify? – deitch 2014-12-04 16:36:17

回答

1

我怀疑你正在做这样的事情:

var express = require('express'); 
var app = express(); 

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

将产生那种导致你的视宁度。修复建议:

添加

​​

并更改网址到

<script src="/node_modules/angular-ui-sortable/src/sortable.js"></script> 
+2

这是事实,但值得注意的是,并非所有节点模块都能在浏览器中正常工作,并且许多节点模块并不特别“浏览器友好”(例如,分配给全局变量等),除非重做。 – Paul 2014-12-04 16:43:40

+0

您的怀疑是正确的。我尝试修复无济于事 - 同样的错误。真的,我只是试图在开发过程中停止使用'uglify',因为调试在单个缩小的js文件上变得单调乏味。似乎使用'browserify'或其他'grunt'插件来包含我所有的js文件都是最优的。 – 2014-12-04 16:52:51

+0

你应该看看使用源地图。 – generalhenry 2014-12-04 16:57:20

0

我尝试过了,这修复工作对我来说:你

app.js中添加节点这个:

app.use('/node_modules',express.static(path.join(__dirname , 'node_modules'))); 

,在你的index.html补充一点:

<script src="node_modules/<packagename>/<filename>.js"></script> 

如果担心从node_models文件夹导入不需要的包,你可以指定路由到所需的包的特定文件夹。希望这可以帮助。

相关问题