2017-06-13 11 views
1

私はAngular "英雄ツアー"のチュートリアルに従っており、webpackと併用することをお勧めします。WebpackJsonpはAzureにデプロイした後に定義されていません

ローカルでは、アプリケーションは問題なくコンパイルされて動作しています。

リポジトリはVisual Studio TeamServicesでホストされ、コミットするとビルドがトリガされます。 ビルドにも細かい動作しているように見える:

Command: deploy.cmd 
Handling node.js deployment. 
KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot' 
Copying file: 'package.json' 
Copying file: 'tsconfig.json' 
Looking for app.js/server.js under site root. 
Node.js versions available on the platform are: 0.6.20, 0.8.2, 0.8.19, 0.8.26, 0.8.27, 0.8.28, 0.10.5, 0.10.18, 0.10.21, 0.10.24, 0.10.26, 0.10.28, 0.10.29, 0.10.31, 0.10.32, 0.10.40, 0.12.0, 0.12.2, 0.12.3, 0.12.6, 4.0.0, 4.1.0, 4.1.2, 4.2.1, 4.2.2, 4.2.3, 4.2.4, 4.3.0, 4.3.2, 4.4.0, 4.4.1, 4.4.6, 4.4.7, 4.5.0, 4.6.0, 4.6.1, 5.0.0, 5.1.1, 5.3.0, 5.4.0, 5.5.0, 5.6.0, 5.7.0, 5.7.1, 5.8.0, 5.9.1, 6.0.0, 6.1.0, 6.2.2, 6.3.0, 6.5.0, 6.6.0, 6.7.0, 6.9.0, 6.9.1, 6.9.2, 6.9.4, 6.9.5, 6.10.0, 7.0.0, 7.1.0, 7.2.0, 7.3.0, 7.4.0, 7.5.0, 7.6.0, 7.7.4, 7.10.0, 8.0.0. 
Selected node.js version 6.1.0. Use package.json file to choose a different version. 
Selected npm version 3.8.6 
Updating iisnode.yml at D:\home\site\wwwroot\iisnode.yml 
Invalid start-up command "webpack-dev-server --inline --progress --port 8080" in package.json. Please use the format "node <script relative path>". 
Missing server.js/app.js files, web.config is not generated 
[email protected] D:\home\site\wwwroot 
npm WARN optional Skipping failed optional dependency /chokidar/fsevents: 
`-- [email protected] 
npm WARN notsup Not compatible with your operating system or architecture: [email protected] 

npm WARN optional Skipping failed optional dependency /karma/chokidar/fsevents: 
npm WARN notsup Not compatible with your operating system or architecture: [email protected] 
npm WARN [email protected] No repository field. 
Finished successfully. 

私はアプリを実行したときしかし、私は、プロトコルストリームに次のエラーが表示されます。

ReferenceError: webpackJsonp is not defined 
at Object.<anonymous> (D:\home\site\wwwroot\dist\app.js:1:63) 
at Module._compile (module.js:446:26) 
at Object..js (module.js:464:10) 
at Module.load (module.js:353:31) 
at Function._load (module.js:311:12) 
at Module.require (module.js:359:17) 
at require (module.js:375:17) 
at Object.<anonymous> (D:\Program Files (x86)\iisnode\interceptor.js:459:1) 
at Module._compile (module.js:446:26) 
at Object..js (module.js:464:10) 

https://github.com/webpack/webpack/issues/368によると、ファイルがロードされる可能性がありますこれは間違った順序で行われますが、これはローカルでも失敗することを意味します。

これは私のwebpack.common.configです:

module.exports = { 
    entry: { 
     "polyfills": "./src/polyfills.ts", 
     "vendor": "./src/vendor.ts", 
     "app": "./src/main.ts" 
    }, 

    resolve: { 
     extensions: [ 
      ".js", ".ts", ".less", ".scss" 
     ], 
     modules: [ 
      'node_modules' 
     ] 
    }, 


    module: { 
     loaders: [{ 
       //omitted 
      }] 
    }, 

    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ['app', 'vendor', 'polyfills'], 
      filename: "[name].js", 
      minChunks: "infinity" 
     }), 

     new HtmlWebpackPlugin({ 
      template: 'src/index.html' 
     }) 
    ] 
} 

そしてwebpack.prod.js:

const ENV = process.env.NODE_ENV = process.env.ENV = 'production'; 

module.exports = webpackMerge(commonConfig, { 
    devtool: 'source-map', 

    output: { 
    path: helpers.root('dist'), 
    publicPath: '/', 
    filename: '[name].[hash].js', 
    chunkFilename: '[id].[hash].chunk.js' 
    }, 

    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    //new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618 
     mangle: { 
     keep_fnames: true 
     } 
    }), 
    new ExtractTextPlugin('[name].[hash].css'), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'ENV': JSON.stringify(ENV) 
     } 
    }) 
    ] 
}); 

私が間違って何をしているのですか?ビルド定義が必要な場合は、編集してください。

+0

ウェブパックの設定ファイルは問題ありません。Kuduデバッグコンソール( 'https:// [YourAppName] .scm.azurewebsites.net/DebugConsole')を使ってAzure上のファイルがあなたのものと同じものかどうかをチェックすることができます。 –

+0

私のMSDNサブスクリプションは今月は枯渇していますので、私のクレジットがリフレッシュされるまで21日待つ必要があります。私はそれに行ってみましょう。ありがとう – Marco

答えて

2

最終的にペニーは落ちました。

私の展開にはいくつかの問題がありました。

Invalid start-up command "webpack-dev-server --inline --progress --port 8080" in package.json. Please use the format "node <script relative path>". Missing server.js/app.js files, web.config is not generated

Azureではnpm startを使用しようとしましたが、WebPACKの-devのサーバーが利用できませんでしたし、コマンド自体は間違ったものだったので、ビルドがちょうど失敗し、すべてはそこから下のカスケード接続。

"scripts": { 
    "dev": "webpack-dev-server --inline --progress --port 8080", 
    "test": "karma start", 
    "start": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail" 
    }, 

その後、私は行方不明の依存関係について、いくつかのerrosを得て開始しました:私はNPMスクリプトを変更するためにあり

。これはnpm install --productionがdepsを取得しているため、のすべてがdependencies: { }に必要であることを認識したときに、4回目の展開の試行が失敗した後に理にかなっていました。

この段階でビルドは成功しましたが、私は404を取得していました。これは、整流が、site\wwwroot\distsite\wwwrootから/の仮想パスを設定しました:

enter image description here

今ウェブサイトが稼働していました。

TODO:

  • 私は今、単純なHello Worldのアプリのためのスペースの200Megsを使用しておりますので、/ node_modules /フォルダを削除するには、後の展開ステップを定義します。
関連する問題