如何从 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，当我通过浏览器查看文件时，我收到的只是其中写有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”的文件。

我希望这会有所帮助:)