应用错误收集

Angular 2 - 在SystemJS Base上构建/部署？（RC.5）

时间：2016-08-26 13:50:32

标签： angular build webpack systemjs jspm

我有一系列问题和一些我想挑战的假设。我无法理解Angular 2的构建步骤。我有一个完整的Angular 2项目，它是用NPM和SystemJS构建的。该项目可以使用lite-server或webpack-dev-server运行良好。我曾尝试使用WebPack，但无法弄明白，构建缺少文件。我正在使用bootstrap，jquery，angular materiel字体/图标，以及我用NPM安装的一些其他第三方库（在我的index.html中引用）。

我已经看到很多关于人们有种子项目的类似问题的链接，但他们似乎并没有真正解释它的全部工作方式。当我遇到错误时，我不确定如何继续。

假设：

SystemJS是模块加载器
Webpack，如果配置正确，将构建项目，包括dist文件夹中的所有必要文件（html，css，js等）。（这感觉就像我的一个问题：也许webpack只是将node_modules构建到一个js文件中？）
使用像JSPM这样的工具而不是像Webpack这样的工具，更容易构建以systemJS库开头的项目

问题：

我是否应该抛弃webpack并尝试使用JSPM，因为我使用的是SystemJS？我从未使用过gulp或jpsm，因此两者都需要某种教程/文档。
有没有办法使用webpack来构建我错过的应用程序？如果有人可以提供一步一步的指示？我有配置文件，我有加载器，我有我的polyfills.ts和vendor.ts（带bootstrap / jquery）文件。

文件树

Folder PATH
|   index.html
|   karma.conf.js
|   package.json
|   README.md
|   systemjs.config.js
|   tree.txt
|   tsconfig.json
|   typings.json
|   webpack.config.js
|   
+---app
|   |   app.component.css
|   |   app.component.html
|   |   app.component.js
|   |   app.component.js.map
|   |   app.component.ts
|   |   app.module.js
|   |   app.module.js.map
|   |   app.module.ts
|   |   app.routing.js
|   |   app.routing.js.map
|   |   app.routing.ts
|   |   http.service.js
|   |   http.service.js.map
|   |   http.service.ts
|   |   main.js
|   |   main.js.map
|   |   main.ts
|   |   
|   +---compare
|   |       compare.component.css
|   |       compare.component.html
|   |       compare.component.js
|   |       compare.component.js.map
|   |       compare.component.ts
|   |       
|   +---home
|   |       home.component.css
|   |       home.component.html
|   |       home.component.js
|   |       home.component.js.map
|   |       home.component.ts
|   |       
|   +---img
|   |       h_logo.png
|   |       
|   +---pipes
|   |       filter-data-pipe.js
|   |       filter-data-pipe.js.map
|   |       filter-data-pipe.ts
|   |       format-metric-pipe.js
|   |       format-metric-pipe.js.map
|   |       format-metric-pipe.ts
|   |       number-to-symbol.js
|   |       number-to-symbol.js.map
|   |       number-to-symbol.ts
|   |       unique-values-pipe.js
|   |       unique-values-pipe.js.map
|   |       unique-values-pipe.ts
|   |       
|   +---printer
|   |       printer.component.css
|   |       printer.component.html
|   |       printer.component.js
|   |       printer.component.js.map
|   |       printer.component.ts
|   |       
|   +---scoreboard
|   |       scoreboard.component.css
|   |       scoreboard.component.html
|   |       scoreboard.component.js
|   |       scoreboard.component.js.map
|   |       scoreboard.component.ts
|   |       
|   \---topnav
|           topnav.component.css
|           topnav.component.html
|           topnav.component.js
|           topnav.component.js.map
|           topnav.component.ts
|                        
+---config
|       helpers.js
|       karma-test-shim.js
|       karma.conf.js
|       polyfills.ts
|       vendor.ts
|       webpack.common.js
|       webpack.dev.js
|       webpack.prod.js
|       webpack.test.js
|            
+---node_modules

webpack.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './config/polyfills.ts',
    'vendor': './config/vendor.ts',
    'app': './app/main.ts'
  },

  resolve: {
    extensions: ['', '.js', '.ts']
  },

  module: {
    loaders: [
      { test: /\.ts$/, loaders: ['ts', 'angular2-template-loader'] },
      { test: /\.html$/, loader: 'html' },
      { test: /\.(png|jpe?g|gif||woff|ico)$/, loader: 'file?name=assets/[name].[hash].[ext]' },
      { test: /\.css$/, exclude: helpers.root('app'), loader: ExtractTextPlugin.extract('style', 'css?sourceMap') },
      { test: /\.css$/, include: helpers.root('app'), loader: 'raw' },
      { test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass'] },
      { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' },
      { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

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

    new webpack.ProvidePlugin({   
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })
  ]
};

webpack.dev.js

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

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

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

  plugins: [
    new ExtractTextPlugin('[name].css')
  ],

  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }
});

pollyfills.js

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');

import 'ts-helpers';

if (process.env.ENV === 'production') {
  // Production
} else {
  // Development
  Error['stackTraceLimit'] = Infinity;
  require('zone.js/dist/long-stack-trace-zone');
}

vendor.js

// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/forms';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// RxJS
import 'rxjs'

//Extras
import 'jquery';
import 'bootstrap-datepicker/dist/css/bootstrap-datepicker';
import 'bootstrap-datepicker/dist/js/bootstrap-datepicker'
import 'bootstrap/dist/css/bootstrap';
import 'bootstrap/dist/js/bootstrap';
import 'https://fonts.googleapis.com/icon?family=Material+Icons';
import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,400italic,300italic,600italic';


// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

的index.html

<html>
  <head>
    <base href="/">
    <title>myApp</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

    <!-- Google Provided Assets -->
    <!-- Material Design Icons by Google see information here: http://google.github.io/material-design-icons/ --> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,400italic,300italic,600italic' rel='stylesheet' type='text/css'>

    <!-- Bootstrap -->
    <link href="node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet">
    <script src="node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

    <!-- DatePicker -->
    <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- 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>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>

    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>

  </head>
  <body> 
     <my-app>Loading...</my-app>
  </body>
</html>

0 个答案:

没有答案