node.js - วิธีโหลดไฟล์ที่รวมกันในการนำเข้าแบบ system ใน Angular 2 โดยใช้ Gulp: ข้อผิดพลาด: มีการเรียกใช้ System.register แบบไม่ระบุชื่อหลายครั้งในโมดูล

ฉันมีแอปพลิเคชัน Angular 2 ที่ใช้ TypeScript ซึ่งสร้างไฟล์ JS

เมื่อเร็วๆ นี้ฉันได้ติดตั้ง npm และ gulp และเขียนงานเพื่อรวมไฟล์ js ทั้งหมดเป็นไฟล์เดียว ตอนนี้จะโหลดไฟล์นั้นอย่างไร?

ก่อนหน้านี้ในหน้า index.html ของฉัน: //ซึ่งทำงานได้โดยที่ main เป็นคอมโพเนนต์ที่บูตสแตรป appComponent

<script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js',
                    defaultJSExtensions: true
                }
            }
        });
        debugger;
        //System.import('Scripts/main')
        System.import('app/V1/components/main')
              .then(null, console.error.bind(console));
    </script>

งาน Gulp ของฉัน:

var config = {
    src: ['app/**/*.js'],
    dest: ['Scripts/']
};

gulp.task('bundle', function () {

    console.log('testing');
    return gulp.src(config.src)
      .pipe(uglify())
      .pipe(concat('all.min.js'))
      .pipe(gulp.dest('app/'));
})

เมื่อฉันรันงาน gulp นี้ มันจะสร้าง all.min.js แต่ตอนนี้จะใช้ยังไง เช่น จะลบ main.js ใน System.import และโหลดไฟล์นี้อย่างไร

<script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js',
                    defaultJSExtensions: true
                }
            },
            map: {
                immutable: 'app/all.min.js'
            }
        });
        debugger;
        //System.import('Scripts/main')
        System.import('app/all.min')
              .then(null, console.error.bind(console));
    </script>

ฉันลองวิธีนี้ซึ่งทำให้เกิดข้อผิดพลาดดังนี้

ข้อผิดพลาด: มีการเรียกใช้ System.register แบบไม่ระบุชื่อหลายครั้งในโมดูล http://localhost:55308/app/all.min.js หากกำลังโหลดไฟล์ bundle ให้แน่ใจว่าการเรียกใช้ System.register ทั้งหมดมีชื่อ

คำตอบ #1

ฉันคิดว่ามีวิธีแก้ปัญหาที่ดีกว่าสำหรับการรวมไฟล์เพื่อใช้กับ system.js มีไลบรารีที่สะดวกเรียกว่า systemjs-builder คุณสามารถใช้งานมันได้อย่างง่ายดายกับ gulp

ก่อนอื่นคุณต้องแยกสคริปต์ system.js ของคุณไปยังไฟล์แยก จากนั้นคุณสามารถใช้งานนี้เพื่อสร้างไฟล์ js ที่รวมกันได้

gulp.task('system', () => {
    var builder = new systemBuilder();

    return builder.loadConfig('./system.config.js') // Name of your system js file
        .then(() => builder.buildStatic('app',  'total.js'))

});

ตอนนี้คุณมีไฟล์ที่รวมกันแล้ว รวมทั้งการตั้งค่า system.js ที่จำเป็นในการรัน ทุกอย่างควรทำงานได้ดีในตอนนี้ อย่างไรก็ตามคุณจะต้องใช้ไลบรารีแยกต่างหากเพื่อทำให้ js ยากต่อการอ่าน gulp-uglify ควรทำงานได้ดี

นี่คือตัวอย่างงาน:

gulp.task('build', ['system'], () => {
    return gulp.src([
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'total.js'
    ])
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./'))
    });

ตอนนี้ถ้าคุณรัน gulp build และรวมไฟล์ main.js ที่สร้างขึ้นไปใน index.html ของคุณ (โดยลบสคริปต์อื่นๆ ทั้งหมดออก) ทุกอย่างควรทำงานได้

คำตอบ #1

บทความที่เกี่ยวข้อง