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

Це продовження статей:

CEF, ES6, Angular 2, TypeScript використання класів .Net Core. Створення міжплатформового GUI .Net за допомогою CEF
CEF, Angular 2 використання подій класів .Net Core

Основна ідея цих статей — створення кроссплатформенних додатків на CEF з використанням Angular 2 і .Net Core. Щоб відв'язатися від сервера, використовуємо свіжий WebPack і налаштуємо на локальне використання файлів.

Для початку створимо package.json.

Вміст package.json
{
"name": "helloapp",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "~2.4.0",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"@angular/upgrade": "~2.4.0",
"angular-in-memory-web-api": "~0.2.4",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2016": "^6.22.0",
"babel-preset-react": "^6.23.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"css-loader": "^0.26.1",
"jquery": "^3.1.1",
"postcss-loader": "^1.3.0",
"raw-loader": "^0.5.1",
"reflect-metadata": "^0.1.9",
"rxjs": "^5.1.1",
"sass-loader": "^6.0.0",
"style-loader": "^0.13.1",
"systemjs": "^0.20.7",
"to-string-loader": "^1.1.5",
"ts-loader": "^2.0.0",
"typescript": "^2.1.6",
"webpack": "^2.2.0",
"webpack-fail-plugin": "^1.0.5",
"webpack-notifier": "^1.5.0",
"zone.js": "^0.7.7"
},
"devDependencies": {
"@types/core-js": "^0.9.35",
"@types/node": "^6.0.46",
"babel-core": "6.23.1",
"babel-eslint": "7.1.1",
"babel-loader": "6.3.0",
"babel-plugin-__coverage__": "^11.0.0",
"babel-polyfill": "^6.0.0",
"babel-preset-angular2": "^0.0.2",
"babel-preset-es2015": "^6.22.0",
"bootstrap-loader": "^2.0.0-beta.20",
"bootstrap-sass": "^3.3.7",
"chunk-manifest-webpack-plugin": "^1.0.0",
"concurrently": "^3.1.0",
"css-loader": "^0.26.1",
"css-to-string-loader": "^0.1.2",
"extract-text-webpack-plugin": "^2.0.0-rc.3",
"file-loader": "^0.10.0",
"html-webpack-plugin": "^2.28.0",
"jquery": "^3.1.1",
"lite-server": "^2.2.2",
"node-sass": "^4.5.0",
"resolve-url-loader": "^1.6.1",
"sass-loader": "^6.0.0",
"style-loader": "^0.13.1",
"typescript": "^2.1.5",
"url-loader": "^0.5.7"
}
} 


Тут зібрані завантажувачі, посилання на необхідні файли ітд, які були підібрані довгими пошуками.

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

Вміст tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"lib": [ "es6", "dom" ],
"types": [ "node" ],
"typeRoots": [
"node_modules/@types"
]
},
"exclude": [
"node_modules",
"wwwroot",
"**/*.spec.ts"
],

"compileOnSave": true
}


Тепер ми можемо створити на підставі package.json директорію node_modules з допомогою команди npm install з директорії програми.

Перш ніж викликати WebPack, потрібно створити кілька файлів polyfills.ts.

Вміст polyfills.ts
import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');

if (process.env.ENV === 'production') {
// Production
} else {
// Development and test
Error['stackTraceLimit'] = Infinity;
require('zone.js/dist/long-stack-trace-zone');
}


Додати в 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:\CEF\CefProgects\TestTypeScript\TestTypeScript\wwwroot\index.html

І Вуаля, ми працюємо автономно, без Web-сервера. Якщо потрібно підключитися до сервера, у нас є все .Net. Наприклад, .Net Core, WCF і ODATA-клієнти.

Посилання на джерело і програми та інструкцію використання можна знайти у попередніх статтях в самому низу.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.