» » CEF, ES6, Angular 2, WebPack 2 .Net Core декстопное приложение без серверной части

 

CEF, ES6, Angular 2, WebPack 2 .Net Core декстопное приложение без серверной части

Автор: admin от 15-02-2017, 23:15, посмотрело: 457

Это продолжение статей:

-> CEF, ES6, Angular 2, TypeScript использование классов .Net Core. Создание кроссплатформенного GUI для .Net с помощью CEF
-> CEF, Angular 2 использование событий классов .Net Core

Основная идея этих статей — создание кроссплатформенных приложений на CEF с использованием Angular 2 и .Net Core. Чтобы отвязаться от сервера, используем свежий WebPack и настроим на локальное использование файлов.

Для начала создадим package.json.


Здесь собраны загрузчики, ссылки на необходимые файлы итд, которые были подобраны долгими исканиями.

Так же необходим tsconfig.json для компиляции TypeScript-файлов.


Теперь мы можем создать на основании package.json директорию node_modules с помощью команды npm install из директории приложения.

Прежде чем вызывать WebPack, нужно создать несколько файлов polyfills.ts.


Добавить в main.ts ссылки на Bootstap и JQuery:


import 'jquery';
import 'bootstrap-loader';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

Теперь нам доступны стили, glyphicons и тд. Теперь перейдем к самому главному, а именно webpack.config.js, на основании которого и будут собираться нужные нам файлы.

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var helpers = require('./helpers');
var babelOptions = {
  "presets": [
    "react",
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "es2016"
  ]
};

module.exports = {
  cache: true,
  entry: {
    polyfills: './app/polyfills.ts',
    main: './app/main.ts',
    vendor: [
      'babel-polyfill'
    ]
  },
  output: {
    path: './wwwroot',
    filename: './scripts/[name].js',
    chunkFilename: './scripts/[chunkhash].js',
    publicPath: './'
  },
  module: {
    rules: [{
      test: /.ts(x?)$/,
      exclude: /node_modules/,
      include: /app/,
      use: [
        {
          loader: 'babel-loader',
          options: babelOptions
         
        },
        {
          loader: 'ts-loader'
        }
      ]
    }, {
      test: /.js$/,
      exclude: /node_modules/,
      include: /app/,
      use: [
        {
          loader: 'babel-loader',
          options: babelOptions
        }
      ]
    },
      { test: /.html$/, loader: 'raw-loader', exclude: [helpers.root('app/index.html')] },
      { test: /.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } },
      { test: /.css$/, loader: 'css-to-string-loader!css-loader' },
      { test: /.scss$/, loaders: ['style', 'css', 'postcss', 'sass'] },
      { test: /.(woff2?|ttf|eot|svg)$/, loader: 'url-loader?limit=10000' },
      { test: /bootstrap/dist/js/umd//, loader: 'imports?jQuery=jquery' }


    ]
  },
   resolve: {
       extensions: ['.ts', '.tsx', '.js','.css']
   },
   plugins: [
  // Workaround for angular/angular#11580
  
  new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
  }),

  new HtmlWebpackPlugin({
      template: 'app/index.html'

  }),
    new ExtractTextPlugin(
        {
            filename: 'styles.css',
            disable: false,
            allChunks: true
        }
),
new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'
})
   ]
};

Здесь собрано всё, чтобы использовать es6 и всё собиралось в несколько файлов в директории
'./wwwroot'. Теперь можно запустить webpack --config webpack.config.js, который и создаст нужные нам файлы.

Но нам придется подправить выходной index.html. Почему-то для:

<script type="text/javascript" src="././scripts/polyfills.js"></script>
<script type="text/javascript" src="././scripts/vendor.js">
</script><script type="text/javascript" src="././scripts/main.js"></script>

Добавляются лишние ./ — убрав ./, мы можем запустить index.html в любом браузере. Но нас интересует наш cefsimple.exe:

Укажем в адресе файла путь к index.html, например, d:CEFCefProgectsTestTypeScriptTestTypeScriptwwwrootindex.html

И Вуаля, мы работаем автономно, без Web-сервера. Если нужно подключиться к серверу, у нас есть все на .Net. Например, .Net Core, WCF и ODATA-клиенты.

Ссылки на исходники и программы и инструкцию использования можно найти в предыдущих статьях в самом низу.

Источник: Хабрахабр

Категория: Программирование, Google

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *