部署后找不到node_modules

Question

这个标题可能有点误导,但请耐心等待一段时间.

我Angular2在2015年的visual studio上制作了一个简单的应用程序,现在我已经有了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需要在开发与生产使用方面有所不同.这就是文档展示的发展方式:

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

这就是他们为生产所展示的内容(注意第一行有不同的src路径):

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

更重要的是,注意在任何一种情况下node_modules都没有引用,也不应该引用.如果您正确设置了代码和配置,SystemJS(与其他构建工具一样)将打包您需要的所有内容,而无需任何其他<script>标记.相反,您应该从代码中的某个位置导入垫片(和类似的).例如,在他们的WebPack指南(的WebPack是另一个构建工具填补了类似的作用,SystemJS)的角度队显示了polyfills.ts是进口的垫片的文件,那么他们包括polyfills文件到其内构建的WebPack配置.

对不起,我不能特别提供有关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上的脚本，从 json 包安装启动脚本-azure.markdown