如何从node_modules文件夹导入脚本

Question

我正在尝试通过教程来使ASP5应用程序与Angular 2.0一起运行。 经过几步，我意识到当我尝试在没有互联网连接的情况下进行操作时不起作用（我通常在坐在火车上时进行操作）。 当然，如果没有互联网连接，本教程建议的导入将无法进行：

<script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>

因此，我试图像这样从我的node_modules文件夹中包含本地文件：

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/rxjs/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

文件存在并且正确。 但是，当我尝试调试项目时，所有四个文件都会收到以下错误： SyntaxError: missing ; before statement SyntaxError: missing ; before statement ，当我通过浏览器查看文件时，我收到的只是Hello World!文件Hello World! 写在里面。 我显然似乎遗漏了一些东西，但是由于我之前从未使用过整个npm部分，所以我不知道为什么会发生这种情况，并且在搜索了几个小时之后，似乎没有其他人遇到这个问题。

是访问限制吗？ 缺少JS模块？ 谁能解释我如何在HTML中包含来自node_modules文件夹的文件？

Answer 1

在Asp.Net 5中，/ wwwroot是Web应用程序的默认根目录，因此在输入时：

node_modules / angular2 / bundles / angular2-polyfills.js

其实际搜索路径如下：

wwwroot / node_modules / angular2 / bundles / angular2-polyfills.js

虽然文件存在于项目根目录下

node_modules / angular2 / bundles / angular2-polyfills.js

但是由于它不在Web应用程序的根目录中，所以您会看到这些脚本的404错误。

解决方案是将这些文件复制到wwwroot文件夹。

我建议编写一个gulp任务以自动将文件复制到wwwroot / script / lib文件夹

然后您可以像这样使用它们：

//Sample Gulp file code
var paths = {
    npmSrc: "./node_modules/",
    libTarget: "./wwwroot/lib/"
};

var libsToMove = [
    paths.npmSrc + '/es6-shim/es6-shim.min.js',
    paths.npmSrc + '/angular2/es6/dev/src/testing/shims_for_IE.js',
    paths.npmSrc + '/angular2/bundles/angular2-polyfills.min.js',
    paths.npmSrc + '/systemjs/dist/system.js',
    paths.npmSrc + '/rxjs/bundles/rx.min.js',
    paths.npmSrc + '/angular2/bundles/angular2.dev.js',
    paths.npmSrc + '/angular2/bundles/router.js',
    paths.npmSrc + '/angular2/bundles/http.min.js',
];

然后在您的html页面或视图中，您可以像这样使用它们：

<script src="~/lib/es6-shim.min.js"></script>
<script src="~/lib/shims_for_IE.js"></script>
<script src="~/lib/angular2-polyfills.min.js"></script>
<script src="/lib/system.js"></script>
<script src="~/lib/rx.min.js"></script>
<script src="/lib/angular2.dev.js"></script>
<script src="/lib/router.js"></script>
<script src="/lib/http.min.js"></script>

您应该在项目的根目录中看到一个gulp文件，如果没有，只需在项目的根目录中创建一个名称为“ gulpfile.js”的文件即可。

我希望这有帮助 ：）