部署后找不到 node_modules

Posted 2023-03-07

【中文标题】部署后找不到 node_modules

【英文标题】：Can't find node_modules after deployment

【发布时间】：2017-06-23 20:54:44

【问题描述】：

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

我在 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 部署到服务器。

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

【参考方案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 提供更具体的建议，但希望这个答案足以为您指明正确的方向。

【参考方案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 安装您的启动脚本

【讨论】：

感谢您的链接。但我无法理解如何运行链接中的命令。

【参考方案3】：

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

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

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

【参考方案4】：

不要使用 system.config.js

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

How to bundle an Angular app for production

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

【讨论】：

我尝试运行npm run bundle，但遇到missing script 捆绑错误。

错误是什么？您是否按照上面的链接捆绑它？

@rajm 是对的，您不应该上传 node_modules，而是将所有内容捆绑在 .js 脚本中。关于missing script，这仅表示您尚未在package.json 文件中配置名称为bundle 的命令。这个怎么样：***.com/questions/35539622/…？

【参考方案5】：

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

npm i --production

【讨论】：

在运行它时，我在控制台上得到了一些typing install，然后执行停止。