angular - आप सिस्टम जेएस बिल्डर का उपयोग करके कांगरा 2 कैसे बंडल कर सकते हैं?




bundling-and-minification systemjs (2)

आप वेबपैक या रोलअप जैसे एक बंडलर का उपयोग कर सकते हैं (मेरी प्राथमिकता क्योंकि यह पेड़-हिलती है)।

अंगूठी टीम पूरी तरह से रिलीज के लिए समय में रोलअप के चारों ओर कुछ महान टूलिंग डाल रहा है। एनजी-कॉन्फ़ के इस दिन 2 मुख्य बिंदु ने चर्चा की और ऑफ़लाइन कंपाइलर का प्रदर्शन किया। इसे 25:30 बजे देखना शुरू करें

मैं वर्तमान में सिस्टम जे एस के साथ सिस्टम जेएस बिल्डर का उपयोग कर रहा हूं ताकि मेरे आवेदन, इसकी परिसंपत्तियों और पुस्तकालयों को बंडल किया जा सके जो कि इसका संदर्भ है। मेरी समस्या यह है कि मैं पुस्तकालयों को बंडल कर सकता हूं जो स्पष्ट रूप से index.html में संदर्भित हैं, जैसे:

<script src="node_modules/es6-shim/es6-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 कैसे बंडल कर सकता हूँ, या कम से कम एन्जिलर 2 से आवश्यक मॉड्यूल, क्योंकि वे वास्तव में HTML में संदर्भित नहीं हैं। यह कैसे किया जा सकता है?


सिस्टमज-बिल्डर का उपयोग करके आप अपने ऐप कोड के साथ काजलदार 2 को बंडल कर सकते हैं और अपने अन्य पुस्तकालयों को अलग से बंडल कर सकते हैं।

मैंने किसी भी लाइब्रेरी को बंडल किया है जो मैं सीधे HTML में एक विक्रेताओं .min.js में संदर्भित करता हूं, और किसी भी पुस्तकालय को मेरे system.config.js प्लस ऐप कोड के माध्यम से एक ऐप.min.js. में संदर्भित करता हूं। इस उदाहरण में आप देख सकते हैं कि यात्रा के नायकों में सभी निर्भरताएं <10 नेटवर्क अनुरोधों ( स्रोत कोड ) में पृष्ठ में लोड की गई हैं।

// Bundle dependencies into vendors file
gulp.task('bundle:libs', function () {
    return gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/semantic-ui/dist/semantic.min.js',
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/es6-promise/dist/es6-promise.min.js',
        'node_modules/systemjs/dist/system.src.js',
        'system.config.js',
      ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/lib/js'));
});

// Compile TypeScript to JS
gulp.task('compile:ts', function () {
  return gulp
    .src([
        "src/**/*.ts",
        "typings/*.d.ts"
    ])
    .pipe(sourcemaps.init())
    .pipe(tsc({
        "module": "system",
        "moduleResolution": "node",
        "outDir": "public/dist/js",
        "target": "ES5"
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/dist'));
});

// Generate systemjs-based builds
gulp.task('bundle:js', function() {
  var builder = new sysBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'public/dist/js/app.min.js');
});

// Minify JS bundle
gulp.task('minify:js', function() {
  return gulp
    .src('public/dist/js/app.min.js')
    .pipe(uglify())
    .pipe(gulp.dest('public/dist/js'));
});

gulp.task('scripts', ['compile:ts', 'bundle:js', 'minify:js']);




systemjs