Старт приложений на Typescript c Webpack и SystemJS.

Webpack

Установка

npm install webpack -g

Шаблон.

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
    </body>
</html>

Пример (test.js).

console.log('Hellloooo')

Сборка.

webpack ./test.js dist/bundle.js

Модульность.

tsc --init
  • app.ts

    import { Word } from ‘./word’ var w = new Word(‘test’,‘34’);

  • word.ts

    export class Word { name: string; trans: string; constructor(name: string, trans: string){ this.name = name; this.trans = trans; } }

Изменим путь к дистрибутиву.

"outDir": "./dist",

Загрузчик модулей SystemJS

npm install systemjs --save

Подключаем в шаблоне.

        <script src="node_modules/systemjs/dist/system.js"></script>

        <script>
            SystemJS.config({    
            })
            SystemJS.import('dist/app.js').then(function(m){
            }, function(error){
                console.log(error);
            });

        </script>

Конфигурируем.

        <script>
            SystemJS.config({

                packages: {        
                    'dist': {
                        defaultExtension: 'js'
                    }
                }

            })

            SystemJS.import('dist/app').then(function(m){
            }, function(error){
                console.log(error);
            });

        </script>

Вынесем конфигурацию в отдельный файл systemjs.config.js.

(function (global) {

System.config({

        packages: {        
            'dist': {
                defaultExtension: 'js'
            }
        }

});

})(this);

Подключим файл.

<script src="systemjs.config.js"></script>

Для сборки https://github.com/systemjs/builder

Инструментарий.

npm install gulp -g 
npm install systemjs-builder gulp-typescript
  • скрипт build.js

    var gulp = require(‘gulp’); var typescript = require(‘typescript’); var tsc = require(‘gulp-typescript’);

    var systemjsBuilder = require(‘systemjs-builder’);

    gulp.task(‘compile’, function () { console.log(‘Building with gulp + systemjs’); return gulp.src([‘*.ts’]) .pipe(tsc({ “target”: “es5”, “module”: “commonjs”, “moduleResolution”: “node”, “sourceMap”: true, “emitDecoratorMetadata”: true, “experimentalDecorators”: true, “removeComments”: true, “noImplicitAny”: false, “suppressImplicitAnyIndexErrors”: true })) .js.pipe(gulp.dest(‘dist’)); });

    gulp.task(‘bundle’, [‘compile’], function() {

    var builder = new systemjsBuilder(‘’,’./systemjs.config.js’); return builder .bundle(‘[dist/*/]’, ‘dist/app.bundle.min.js’, { minify: true, mangle: true }) .then(function() { console.log(‘Build complete’); }) .catch(function(err) { console.log(‘Build error’); console.log(err); });

    });

Запуск.

gulp bundle

Шаблон.

<script src="node_modules/systemjs/dist/system.js"></script>
<script src="dist/app.bundle.min.js"></script>   
<script>

    System.import('systemjs.config.js').then(function() {
        System.import('dist/app').catch(function(err){ console.error(err); });
    });

</script>

Webpack

Конфигурация webpack.config.json.

module.exports = {
    entry: "./app.ts",
    output: {
        path: __dirname+'/dist',
        filename: "wabpack.bundle.js"
    }   
};

При запуске.

webpack

Получаем.

ERROR in ./app.ts
Module not found: Error: Can't resolve './word' in '...'
@ ./app.ts 1:0-29

Видимо нужно объяснять про Typescript.
Это организуется с помощью загрузчиков (loaders). Они отрабатывают перед сборкой и на нее не влияют в отличии от плагинов.

Устанавливаются так npm install xxx-loader –save.

npm i ts-loader --save

https://github.com/TypeStrong/ts-loader

Подключаем.

module.exports = {
    entry: "./app.ts",
    output: {
        path: __dirname+'/dist',
        filename: "wabpack.bundle.js"
    },

    resolve: {
        // Resolvable extension.
        extensions: ['.ts', '.js']
  },
  module: {
    loaders: [ 
      { test: /\.ts?$/, loader: 'ts-loader' }
    ]
  }
};

Осталось мимифицировать плагином.

npm i -D webpack    
npm i -D uglifyjs-webpack-plugin

Добавляем плагин.

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
   ...

  plugins: [
    new UglifyJSPlugin()
  ]

};