Главная > JavaScript > Angular 2, Webpack и JavaScript.

Angular 2, Webpack и JavaScript.

Найти документацию по Angular 2 на TypeScript не составляет труда, однако, чтобы заставить работать этот новомодный фреймворк на JavaScript без TypeScript, придется постараться. Поскольку браузеры не поддерживают ES6 и ES7 из коробки, необходимо подключать Babel и различные полифиллы. А чтобы собрать все это вместе и довести до рабочего состояния, может потребоваться большое количество времени. Ниже приведены фрагменты конфигов Webpack webpack.config.js и package.json для запуска Angular 2 без TypeScript с использованием Babel. Версии библиотек могут отличаться.


webpack.config.js

module.exports = {
    ...
    watch: true,
    devtool: "source-map",
    module: {
        loaders: [
            {
                test: /\.js?$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    plugins: [
                        "angular2-annotations",
                        "transform-decorators-legacy",
                        "transform-class-properties",
                        "transform-flow-strip-types"
                    ],
                    presets: ["es2015", "stage-0"]
                }
            },
            { test: /\.html/, loader: "html-loader" },
            { test: /\.css/, loaders: ["to-string-loader", "style-loader", "css-loader"] },
            { test: /\.(png|svg)/, loaders: ["url-loader"] },
            { test: /\.json/, loaders: ["json-loader"] }
        ]
    },
    ...
};

package.json

{
  ...
  "dependencies": {
    "@angular/common": "^2.4.2",
    "@angular/compiler": "^2.4.2",
    "@angular/core": "^2.4.2",
    "@angular/forms": "^2.4.2",
    "@angular/http": "^2.4.2",
    "@angular/platform-browser": "^2.4.2",
    "@angular/platform-browser-dynamic": "^2.4.2",
    "@angular/router": "^3.4.2",
    "@angular/upgrade": "^2.4.2",    
    "angular-in-memory-web-api": "^0.2.4",
    "babel-core": "6.21.0",
    "babel-loader": "6.2.10",
    "babel-plugin-transform-flow-strip-types": "^6.21.0",
    "core-js": "latest",
    "jquery": "^3.1.1",    
    "node-sass": "^4.2.0",
    "normalize.css": "5.0.0",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.0.3",
    "sass-loader": "^4.1.1",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {    
    "babel-core": "latest",
    "babel-loader": "latest",
    "babel-plugin-angular2-annotations": "5.1.0",
    "babel-plugin-transform-decorators-legacy": "latest",
    "babel-plugin-transform-flow-strip-types": "latest",
    "babel-plugin-transform-runtime": "latest",
    "babel-polyfill": "latest",
    "babel-preset-es2015": "latest",
    "babel-preset-stage-0": "latest",
    "babel-runtime": "latest",
    "concurrently": "latest",    
    "css-loader": "latest",
    "file-loader": "0.9.0",
    "gulp": "latest",
    "gulp-watch": "latest",
    "html-loader": "latest",
    "html-webpack-plugin": "2.24.1",
    "json-loader": "0.5.4",
    "lite-server": "latest",
    "node-sass": "latest",
    "resolve-url-loader": "1.6.1",
    "sass-loader": "latest",
    "style-loader": "0.13.1",
    "svg-url-loader": "1.1.0",
    "to-string-loader": "1.1.5",
    "url-loader": "0.5.7",
    "webpack": "latest",
    "webpack-dev-server": "latest",
    "webpack-stream": "latest",
    "webpack-watch-livereload-plugin": "latest"
  }
}
  1. Пока что нет комментариев.
  1. Пока что нет уведомлений.