www.bifa88.com 4

支付情状搭建,从成立到发表生产条件www.bifa88.com:

本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家

环境简介

  • Angular4 @angular/cli
  • 开发环境
    Mac + WebStorm
  • 生产环境
    Ubuntu + Nginx

大家好,我是IT修真院上海分院5期的学员,一枚正直纯洁善良的web前端程序员

用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron
中使用 Angular
的各种特性,使开发桌面软件像开发网站一样简单、快捷,而且可以模块化,紧跟最新技术趋势。

使用 @angular/cli创建angular4项目

  • 必备条件:
    1. Node.js 6.9.x以上
    2. npm 3.x.x以上
  • 安装
    npm install -g @angular/cli
  • 创建项目
    ng new my-app
  • 启动

    cd my-app
    ng serve --open #--open 自动打开浏览器,不是必须
    
  • 测试项目
    浏览器访问Url即可
    http://localhost:4200

今天给大家分享一下?什么是Angular CLI?

安装 Angular CLI 和 Electron

发布

angular4可以使用多种方式编译发布:

  • tsc
  • aot
  • webpack2

首先使用 npm 安装 Angular Cli:

tsc

tsc是angular默认的发布方式,这种方式会将所有文件打包、压缩、混淆,但打包出来的文件仍然很大,因为这个打包将很多没有用到的库文件也一起打包了。

#使用angular/cli自带的tsc打包
cd my-app
ng build #编译并打包
ng build --prod #编译并打包、混淆为生产环境

npm run build #与上面同理
npm run build --prod #与上面同理

1.背景介绍

Angular Cli和Angular,Angularjs有什么区别?

www.bifa88.com 1

Angular 1.x
专注于web开发,没有涉及到移动这方面的内容,还好后来杀出个程咬金IONIC移动app开发框架,让angularjs1.x很好的支持了移动开发

Angular 2目标:原生移动支持 – iOS 和 Android

Angular 2 会有两层,应用层和渲染层。例如一个组件可以用不同的 @View
修饰器修饰,根据运行环境可以在运行时生效。

Angular
Cli是angular对包括一堆工程化构建工具,例如webpack的封装,能让开发者更容易的搭建angular工程。

$ npm i -g @angular/cli

AoT

预AoT编译是angular提供的另外一套编译方式。可以配合Tree
Shaking工具进行代码的精简、压缩、混淆。
预AoT编译官方教程

2.知识剖析

怎样安装ANGULAR CLI?

在使用 Angular CLI 之前,你必须确保系统中 Node.js 的版本高于 6.9.0 且
npm 的版本高于 3.0.0。

若你尚未安装 Node.js,你可以访问 Node.js
官网,然后根据你所用的操作系统选择对应的安装方式。

若你本机已经安装 Node.js 和
npm,你可以通过运行以下命令,确认一下当前环境信息

www.bifa88.com 2

然后安装 Electron

部署到Ubuntu Nginx

使用ng build --prod编译发布后,项目中的dist文件夹就是发布编译好的生产文件。
dist文件夹中只包含一个index.html文件、一些JS文件和assert文件夹。原因是angular已经将所有的组件编译到了main.js文件中,包括html、css。实际上这时我们就可以把这个dist文件放到任何服务器中使用了。

3.常见问题

$ npm i -g electron

Nginx

安装好nginx之后,打开nginx的站点配置文件

vim /etc/nginx/sites-available/default

找到server节点下的下面这些内容

server{
        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }
}

将内容修改为

server{
        root /var/www/dist; # dist文件夹为之前编译并打包的文件夹

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html; # 这里定义的是nginx默认首页

        server_name _;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ /index.html; #因为angular将所有的组件全部打包到了js里面,只留了一个index.html,所以只需要将所有的http请求指向index.html即可
        }
}

重启并访问服务器的地址。

如何检查NODE,NPM,ANGULAR CLI是否安装好

创建项目

4.解决方案

通过node -v命令

通过npm -v命令

通过ng -v命令

用 Angular CLI 创建一个新项目:

5.编码实战

在命令行输入上面3条命令

www.bifa88.com 3

$ ng new PROJECT-NAME --style=scss
$ cd PROJECT-NAME
$ npm i

6.扩展思考

angular cli的工程文件解读

www.bifa88.com 4

www.bifa88.com,dist为ng bulid命令输出的目录

src为开发目录

package.json中配置的依赖项

这里选择使用 SCSS 作为 css 预处理器。

7.参考文献

npm官方镜像link

angular中文官方文档link

angular cli
终极指南link

构建 Electron 配置

8.更多讨论

Q1:执行ng serve的过程

Angular CLI 从 .angular-cli.json 文件中加载配置信息

Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件

Angular CLI 启动 webpack dev
server 本地开发服务器,默认的地址是 localhost:4200

Q2:cli是什么?

自动化构建工具(包括webpack等)

Q3:还有没有别的安装方式??

可以通过webstorm等ide直接构建

安装本地 Electron 依赖:

$ npm i -D electron electron-reload

electron-reload 这个是 electron
的一个可以检测文件变化而实时刷新的包,在配置中配置这个每次文件更改后程序都会实时刷新。

Electron 是使用 index.js
作为入口文件的,可以去网上看相关教程,下面我把我的 index.js
文件贴出来供大家参考:

// index.js
const {
 app, // 控制应用生命周期的模块。
 BrowserWindow, // 创建原生浏览器窗口的模块
} = require('electron');
require('electron-reload')(__dirname);
// 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC,window 会被自动地关闭
let win;
const createWindow = ()=> {
 // Create the browser window.
 win = new BrowserWindow({
 width: 1200,
 height: 800,
 frame: false,
 defaultFontSize: 16,
 minWidth: 1200,
 minHeight: 800,
 icon: `file://${__dirname}/dist/assets/icon.png`,
 defaultMonospaceFontSize: 16,
 defaultEncoding: "utf-8",
 webPreferences: {
  plugins: true
 }
 });
 // 加载应用的 index.html
 win.loadURL(`file://${__dirname}/dist/index.html`);
 // 打开开发工具
 win.webContents.openDevTools();
 // 当 window 被关闭,这个事件会被发出
 win.on('closed', () => win = null);
 win.on('ready-to-show', () => {
 win.show();
 win.focus();
 })
};
// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候这个方法就被调用
app.on('ready', createWindow);
// 当所有窗口被关闭时,退出程序
app.on('window-all-closed', () => {
 // 在 OS X 上,通常用户在明确地按下 Cmd + Q 之前应用会保持活动状态
 process.platform !== 'darwin' && app.quit();
});
app.on('activate', () => {
 // On OS X it's common to re-create a window in the app when the
 // dock icon is clicked and there are no other windows open.
 win === null && createWindow();
});

因为我们使用 Angular CLI 编译后的文件是输出在 dist
文件夹的,所以我们要配置 loadURL 的地址为 dist 文件夹下的 index.html
文件。同时我们最好将静态文件都放在 src/assets 文件夹下,然后配置在
dist/assets 文件夹下就好了。

测试

可以在项目文件夹中运行以下命令查看效果了:

$ ng build --watch true
$ electron ./

这样就可以将项目启动起来了,而且可以实时监测文件的变化刷新软件,很便捷。

一些问题

现在软件基本可以跑起来了,但是在项目中只能使用 Chrome API,Electron 和
Node.js 提供的 API 在项目中并不能使用,因为 @angular/cli
提供的会将这部分代码编译掉,程序就会报错,那怎么办呢?有以下几个方法:

  1. 直接使用 Webpack 构建项目,Webpack 在配置文件中提供了 target
    配置项,设置为 electron-renderer 就可以了。
  2. 使用 ng eject 弹出配置文件,然后在 webpack.config.js 中配置 “target”:
    “electron-renderer” ,可以达到配置 webpack 的效果。
  3. 还有最后一个笨办法,那就是在每个使用 Electron 或 Node.js API
    的文件中的顶部都使用 TypeScript 的声明来声明 require ,强制不编译
    require ,方法如下;
declare global {
 interface Window {
 require: any;
 }
}

const electron = window.require('electron');

这三种方法都可以实现在 @angular/cli 创建的项目中使用 Electron 或 Node.js
API,但都是略麻烦,希望 项目自尽快放开 target 的配置吧。

小尾巴

下面是我最近正在用 Angular4 和 Electron
构建的项目,还没开发完成,希望给新手参考一下,也希望大佬多多指点!

最近尝试着构建了几个小项目,发现框架之类的主要是使用上的差别,重要的还是在大型项目中的数据架构的处理,目前我在使用的数据架构主要有
redux 和 rxjs
,各有千秋,将数据架构与框架结合起来才能实现清晰明了、简单易开发的项目,努力向这个方法加油。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。