部署后找不到 node_modules

Question

这个标题可能有点误导，但请耐心等待。

我在 Visual Studio 2015 上制作了一个简单的 Angular2 应用程序，现在我有了 published it on Azure。

在开发环境中有 node_modules 是完美的，但部署后显示错误，说找不到 node_modules。

这是我在 index.html-

中的开发环境中所指的方式

<!-- Polyfill(s) for older browsers -->
    <script src="/node_modules/core-js/client/shim.min.js"></script>
    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/systemjs.config.js"></script>

它也在 system.config.js-

中提及

/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {

// map tells the System loader where to look for things
var map = {
'app':                        '/app', // 'dist',

'@angular':                   '/node_modules/@angular',
'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api',
'rxjs':                       '/node_modules/rxjs'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app':                        { main: 'main.js',  defaultExtension: 'js' },
'rxjs':                       { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};

var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];

// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}

// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}

// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);

// No umd for router yet
packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

var config = {
map: map,
packages: packages
};

System.config(config);

})(this);

这个错误是有道理的，因为我有一个 .gitignore 文件，它不允许 node_modules 部署到服务器。

有人可以协助我在部署后如何运行它，以及可以对上述参考进行哪些更改以使其正常工作。

Answer 1

我没有使用过 SystemJS，但你的赏金已经诱使我尝试回答，因为看起来你仍然需要答案。 :)

浏览了一些 SystemJS 文档后，您的 index.html 看起来需要在开发和生产用途中有所不同。这是development 的文档显示的内容：

<script src="systemjs/dist/system.js"></script>
<script>
  SystemJS.import('/js/main.js');
</script>

这就是他们为production 显示的内容（注意第一行有一个不同的src 路径）：

<script src="systemjs/dist/system-production.js"></script>
<script>
  SystemJS.import('/js/main.js');
</script>

更重要的是，请注意node_modules 在这两种情况下都没有被引用，也不应该被引用。如果您的代码和配置设置正确，SystemJS（与其他构建工具一样）将打包您需要的所有内容，而无需任何额外的<script> 标签。相反，您应该从您的代码中的某个地方导入您的 shims（和类似的）。例如，在他们的 Webpack 指南（Webpack 是另一个构建工具，其作用与 SystemJS 相似）中，Angular 团队展示了一个 polyfills.ts 文件，该文件导入了他们的 shim，然后他们将 polyfills 文件包含在他们的 webpack configuration 中的构建中。

很抱歉，我无法特别针对 SystemJS 提供更具体的建议，但希望这个答案足以为您指明正确的方向。

Answer 2

您要么必须将node_modules 部署为包的一部分，要么让脚本运行npm install 以便您从package.json 获取包

要获取 package.json 文件中的包，请执行 npm install --save package-you-want-to-install

然后您可以通过尝试此链接https://github.com/woloski/nodeonazure-blog/blob/master/articles/startup-task-to-run-npm-in-azure.markdown上的脚本来从包 json 安装您的启动脚本

Answer 3

您可以做的一件事是通过 Kudu 仪表板在 Azure 服务器上安装所需的包。

1. 转到https://yoursitename.scm.azurewebsites.net
2. 然后调试控制台-> CMD
3. 进入 home\site\wwwroot 目录
4. 键入 npm install

这将为 Angular 2 应用程序安装所需的包以在 Azure 服务器上运行。

Answer 4

不要使用 system.config.js

您需要先捆绑它。不要在 Azure 中上传 node_modules。捆绑参考下面的链接。

How to bundle an Angular app for production

一旦你捆绑 dist 文件夹就会创建。您可以在 Azure 中上传 dist 文件夹。

Answer 5

npm 在 prod env 上安装你的 deps ..

npm i --production