Jak połączyć (zminimalizować) skompilowane elementy Angular 2?

próbuje zminimalizować skompilowany kod źródłowy projektu do produkcji, Używam Gulpa jako biegacza zadania.Jak połączyć (zminimalizować) skompilowane elementy Angular 2?

plików źródłowych wyglądać tak,

html

<!--... . . various scripts and styles . . . . . ---> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
<script src="node_modules/angular2/bundles/router.dev.js"></script> 
<script src="node_modules/angular2/bundles/http.dev.js"></script> 

<script> 
    System.config({ 
    packages: {   
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
    System.import('app/main') 
     .then(null, console.error.bind(console)); 
</script> 
</head> 
<body> 
    <app></app> 
</body>

moja aplikacja struktura katalogów jest następująca,

. 
├── main.js 
├── main.js.map 
├── main.ts 
├── main.app.js 
├── main.app.js.map 
├── main.app.ts 
├── x.component1 
│   ├── x.component.one.js 
│   ├── x.component.one.js.map 
│   └── x.component.one.ts 
└── x.component2 
    ├── x.component.two.js 
    ├── x.component.two.js.map 
    └── x.component.two.ts

app/main.ts

import {bootstrap} from 'angular2/platform/browser'; 
import {MyAwesomeApp} from './main.app' 

bootstrap(MyAwesomeApp);

main.app.ts

@Component({ 
    selector: 'app', 
    template: ` 
     <component-1></component-1> 

     <component-2></component-2> 
    `, 
    directives: [Component1, Component2] 
}) 


export class MyAwesomeApp { 

}

następnie składniki,

@Component({ 
    selector: 'component-1', 
    template: ` 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi. 
    ` 
}) 


export class Component1 { 

}

@Component({ 
    selector: 'component-2', 
    template: ` 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi. 
    ` 
}) 


export class Component2 { 

}

wszystkie pliki maszynopis są kompilowane do ES5 JavaScript, dodatkowo trzeba by minified main.js

więc moje pytania są

mogę uruchomić zadanie zebrać wszystkie skompilowane .js pliki do minify do jednego pliku i odniesienie go jako main w branży produkcyjnej?
Czy to powoduje przerwanie importu systemu modułów {x} z "y"?
Jeśli złamie system ładowania modułów, co można zrobić, aby połączyć pliki w aplikacji Angular 2?

moja wersja maszynopis jest 1.8.2

Dziękuję za wszelką pomoc.

Źródło

2016-03-05 Rivadiz

Świetne pytanie! – user65439

Jeśli chcesz skompilować wszystkie pliki TypeScript w jeden, musisz użyć właściwości outFile kompilatora TypeScript. Można go konfigurować za pomocą wtyczki gulp-maszynopis.

W ten sposób nie trzeba skonfigurować SystemJS załadować moduł na podstawie nazw plików:

<script> 
    // Not necessary anymore 
    /* System.config({ 
    packages: {   
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
     } 
    } 
    }); */ 
    System.import('app/main') 
     .then(null, console.error.bind(console)); 
</script>

Nazwy modułów i ich treść są teraz obecne w tym jednym pliku. W ten sam sposób dla plików pakowanych pakietów dystrybucji Angular2 (angular2.dev.js, http.dev.js, ...). Aby użyć tego pliku, po prostu umieść go w elemencie script.

W ten sposób nie zepsujesz importu modułów.

Następnie można zminimalizować ten pojedynczy plik za pomocą uglify plugin of gulp ...

Źródło

2016-03-05 07:33:27

To chyba nie działa ode mnie. Jeśli wykonuję 'System.import ('app/main')' mówi, że nie może znaleźć pliku. Jeśli zrobię 'System.import ('app/main'.js)' to ładuje plik, ale żadna z funkcji zainicjować. Najczęściej brakuje mi tutaj ... –

Czy dodajesz plik js do elementu 'script'? –

Tak, mam to .. '' a następnie wszystkie skrypty z https://angular.io/docs/ts/latest/quickstart.html .. w bibliotekach sekcja przed nim. Tak więc '' jest moim ostatnim przed 'System.import' –

Ponieważ już używasz Gulpa, możesz po prostu dodać webpack w swoim zadaniu gulp, aby połączyć wszystkie swoje pliki źródłowe JavaScript (jak również źródła Angular2) w jeden. Oto próbka tego, co twoi webpack.config.js mógłby wyglądać następująco:

module.exports = { 
    entry: './src/app/app', 
    output: { 
    path: __dirname + '/src', publicPath: 'src/', filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.ts'] 
    }, 
    module: { 
    loaders: [{ 
     test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/ 
    }] 
    } 
};

odpowiednich sekcjach od gulpfile.js są

var webpack = require('webpack-stream'); 
var htmlReplace = require('gulp-html-replace'); 
var gulp = require('gulp'); 

gulp.task('webpack', function() { 
    return gulp.src('src/app/*.ts') 
    .pipe(webpack(require('./webpack.config.js'))) 
    .pipe(gulp.dest('src/')); 
});

Wymień gulp.dest('src/') z odpowiednim miejscu, które Cię chcesz, aby Twój kod produkcyjny pozostał w tym miejscu.

Następnie musisz przetworzyć pliki HTML, aby uzyskać odpowiednie odwołania do plików źródłowych JavaScript (także n gulpfile.js).

gulp.task('html', ['templates'], function() { 
    return gulp.src('src/index.html') 
    .pipe(htmlReplace({ 
     'js': ['bundle.js'] 
    })) 
    .pipe(gulp.dest('dist/')); 
});

Jeśli chcesz zminimalizować swoje pliki JavaScript, możesz użyć UglifyJS2. (Zauważ jednak, że coś jest nie tak z zaciemnianiem, stąd mangle: false. Zobacz ten SO link po więcej). Oto odpowiednie gulpfile.js treść:

gulp.task('js', ['webpack'], function() { 
    return gulp.src('src/bundle.js') 
    .pipe(uglify({ 
      mangle: false 
      })) 
    .pipe(gulp.dest('dist/')); 
});

W ten sposób kod produkcyjny kończy się w folderze dist skąd można go wdrożyć. Teraz masz wybór, czy sprawdzisz to w gałęzi produkcyjnej, czy nie.

Zapraszam do zapoznania się z moją words project on Github, jeśli chcesz zobaczyć działającą wersję na bardzo małej aplikacji Angular2.

Źródło

2016-03-06 18:39:31 carnun

Ustawiasz maglowanie zwiększonego pliku o prawie 50% dla mnie :(nie ma innego rozwiązania? –

** Utwórz pojedynczy plik z TS z opcjami w tsconfig.json.

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": true, 
    "noImplicitAny": false, 
    "outDir":"client/build/", 
    "outFile": "client/build/all.js", 
    "declaration": true 
    }, 
    "exclude": [ 
    "node_modules", 
    "server" 
    ], 
    "include": [ 
     "client/*.ts", 
     "client/**/*.ts", 
     "client/**/**/*.ts" 
    ] 
} 

// Include all folders to put to a file.

** Budowanie pliku wyjściowego i to w sposób następujący: Przykład:

<script> 


    // Alternative way is compile in all.js and use the following system config with all the modules added to the bundles. 
    // the bundle at build/all.js contains these modules 
System.config({ 
    bundles: { 
     'client/build/all.js': ['boot','components/all/present','components/main/main','components/register/register','components/login/login','components/home/home','services/userdetails','services/httpprovider'] 
    } 
    }); 

    // when we load 'app/app' the bundle extension interrupts the loading process 
    // and ensures that boot of build/all.js is loaded first 
    System.import('boot'); 


    </script>

** Minify plik all.js jak ty normalnie.

Źródło

2016-03-09 04:36:53 Gary

Wygląda na to, że minifikacja została dodana teraz. https: // github. com/Microsoft/TypeScript/issues/8 – Gary

Jeśli używasz @angular/cli można uruchomić

ng build --prod

do minify i gzip kod.

Źródło

2017-02-21 12:48:38

Jak połączyć (zminimalizować) skompilowane elementy Angular 2?

Odpowiedz

Powiązane problemy