blog
blog copied to clipboard
jiayisheji
没事写写文章，喜欢的话请点star，想订阅点watch，千万别fork！
随着项目越来越大，现在模块已经有100多个了，一开始我想着把它们拆开，打算使用`angular-cli`提供的自定义库的功能(ng generate library my-lib)，发现有个bug，我自己摸索一下，算是解决这个bug，下次把它贴出给大家遛遛。 我们还是要解决暂时的问题，打包慢，还有打包会失败的问题：  我们使用的是jenkins自动打包。 在我本地打包了5次成功了1次，全是这个错误。 其实这个问题也是算是nodejs的锅了。那我们需要解决，不然怎么继续愉快的玩耍。 找问题得到答案：修改`node --max_old_space_size=size` 这个`size`随意，大概就是`1024*n`，推荐`4和8`，看你自己系统的内存吧，合理选择，我电脑16g，选择的是8。 最后结果就是：`node --max_old_space_size=8192`。（数学问题不用我教了） 因为`angular-cli`是我们每次`npm install`都会自动安装，如果我直接去改`.bi/ng`这个命令不是很靠谱，一次重装你就回到解放前了。 在写`Angular`时候，满屏的装饰器，也有一个对应的设计模式叫装饰器模式，允许向一个现有的对象添加新的功能，同时又不改变其结构。简单理解是不改变原有的功能，给它去添加新功能。我们需要这样思路。 我们可以最简单的去复制`.bi/ng`，这个玩意叫shell命令，其实我不会玩。 话不多说，开始干活。 1. 在项目的根创建一个`scripts`文件夹，以后需要写脚本都可以丢进去。 2. 在`scripts`创建一个`ng.sh`文件。 ```sh #!/bin/sh basedir=$(dirname "$(echo "$0" | sed...
Angular开发中，有时候有些错误让人一脸懵逼，不知道该如何下手，接下来我就介绍一下我在我使用angular中遇到的问题和解决方案（欢迎你留下你的问题和解决方案，让我们angular开发更轻松容易）： ## 关于依赖注入问题 经常看有人在群里问下面这张图是什么问题，  上面问题解答是`AppComponent`依赖`NameService`服务，`NameService`却没有申明。 解决方案去申明注册：(注意：服务注册位置决定服务作用域) 全局申明：（一般用于全局数据共享使用，如果是注册到全局，推荐第一种方式，因为它对打包会有优化） 1. 直接在服务里面申明作用域 ```ts @Injectable({ providedIn: 'root', }) export class NameService { } ``` 2. 根模块注册到providers里 ```ts @NgModule({ declarations: [AppComponent], imports: [ ],...
# 学习Angular从入门到放弃 从刚接触Angular到现在，自己也是一路摸滚打爬过来的，虽不是什么高手，单对于如何学习Angular，还是有一些个人的见解，拿出来与大家共勉。 学习Angular从入门到放弃，大致有6个过程或者说是6个层次： ## 第一步 了解 对于刚接触`Angular`的新手来说，第一步无非是打基础，也是最重要的一步，决定你要不要继续。（`Angular`学习门槛略高，不是有意吓你的） 在学习之前你要弄明白以下事情： - TypeScript的特性和语法。假如你对 TypeScript 还不熟悉的话，推荐以下途径快速上手： - [TypeScript中文网](https://www.tslang.cn/) - [TypeScript官网](http://www.typescriptlang.org/) - [TypeScript Github](https://github.com/Microsoft/TypeScript) - [TypeScript @types(类型定义开源库集合)](https://github.com/DefinitelyTyped/DefinitelyTyped) - `Angular`是什么？`Angular`与AngularJs的区别是什么？ - `Angular`版本差异？如何选择合适的版本？ - `Angular`适用场景？`Angular`不适用的场景？ -...
# Karma+Jasmine+istanbul+webpack自动化单元测试 ## 前言 一直用别人配置好的东西，经常看别人写教程来写简单的单元测试，闲来无事自己也来撸个配置玩玩。说干就干，从开始到运行成功差不多5个小时。遇到各种问题，主要是各种模块的配置版本问题。 ## 简单介绍一下要用到东西是什么 ### Karma的介绍 Karma是Testacular的新名字，在2012年google开源了Testacular，2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字，表示佛教中的缘分，因果报应，比Cassandra这种名字更让人猜不透！ Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。 ### Jasmine的介绍 Jasmine是单元测试框架，我将用Karma让Jasmine测试自动化完成。jasmine提出行为驱动【BDD(Behavior Driven Development)】,测试先行理念，Jasmine的[官网](https://jasmine.github.io/1.3/introduction.html) ### istanbul的介绍 istanbul是一个单元测试代码覆盖率检查工具，可以很直观地告诉我们，单元测试对代码的控制程度。（ps：这个玩意浪费我好久时间，后面详细说怎么配置） ### webpack的介绍 webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency...
> 最近在捣鼓一个仿简书的[开源项目](https://github.com/jiayisheji/jianshu)，从前端到后台，一战撸到底。就需要数据支持，最近mock数据，比较费劲。简书的很多数据都是后台渲染的，很难快速抓api请求数据，本人又比较懒，就想到用写个简易爬虫系统。 ## 项目初始化 安装nodejs，[官网](https://nodejs.org/en/download/)， [中文网](http://nodejs.cn/)。根据自己系统安装，这里跳过，表示你已经安装了nodejs。 选择一款顺手拉风的编辑器，用来写代码。推荐webstorm最近版。 webstorm创建一个工程，起一个喜欢的名字。创建一个package.json文件，webstorm快捷创建package.json非常简单。还是用命令行创建，打开Terminal，默认当前项目根目录，npm init，一直下一步。 > 可以看这里[npm常用你应该懂的使用技巧](https://github.com/jiayisheji/blog/issues/5) ## 主要技术栈 - superagent 页面数据下载 - cheerio 页面数据解析 这是2个npm包，我们先下载在接着继续，下载需要时间的。 ``` npm install superagent cheerio --save ``` 接下啦简单说说这2个是啥东西 ## [superagent](http://visionmedia.github.io/superagent/)...
# angular多工程探索.md 开发 [Angular](https://github.com/angular/angular) 就不能不知道 [Angular-CLI](https://github.com/angular/angular-cli) 这个超级好用的命令行工具，有了这个工具，原本混沌的开发环境，顿时清晰，许多繁琐的琐事，一个命令就搞定。 `Angular-cli` 从2015年发布到现在已经经历很多版本，主要有2个大版本变化，一个单工程，一个是多工程。 单工程是`1.x`版本，多工程是`6.x+`版本，最新版是`7.x`。如果使用`Angular-cli`开发`Angular`应用，当前版本是`Angular6`以下的，最好不要直接`ng update`，会有很多坑等你，最保险也是最安全的方式是，先升级全局`angular-cli`，再用它`ng new project`，将之前项目`scr`目录内容拷贝进去，修改`package.json`和`angular.json`(注：1.x里面叫`.angular.json`)。安装第三方依赖包，然后运行，修改飚红的错误即可。这个升级最大错误是`rxjs`问题。当前版本是`Angular6`的，可以直接升级`Angular7`。如果你在升级过程中遇到问题，可以联系我寻求帮助。 ## 多工程 多工程是`angular-cli 6x`一个核心亮点，这个是借鉴`@angular/router`作者写的一个`angular-cli`增强工具[nrwl](https://blog.nrwl.io)，目的多个工程共享一个`node_modules`。 其实我认为还有2个目的，这也是本文的重点，这里简单描述一下。一个是`angular-cli`随着工程增大，编译越来越慢，这个时候拆模块就很重要的。一个是可以直接发布`npm`包，打造自己组件库。 ## 准备 ### 环境 1. 依赖环境 node V8 + （可以用nvm做版本管理，最好选用node 10） 2....
> 随着nodejs流行，npm伴随nodejs逐步成长起来，安装nodejs以后就自动安装了npm。 # npm是什么? npm 是 nodejs 的包管理和分发工具。它 可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段，并且通过 npm 管理你分享的代码也很方便快捷和简单。 ## npm升级 ``` npm install npm -g ``` ## 查看当前版本 ``` npm -v ``` ## 安装方式（全局 or...
# 前言 使用[Angular CLI](https://github.com/angular/angular-cli)开发[Angular](https://github.com/angular/angular)应用程序是一个非常愉快的体验！`Angular团队`为我们提供了惊人的`CLI`工具，支持大部分开箱即用的构建项目所需要的功能。 标准化的项目结构，具有全面的测试功能（单元测试和e2e测试），代码脚手架，支持使用环境特定配置的生产级构建。这是一个强大功能的脚手架，为我们每个新项目节省了大量的时间。这里要感谢`Angular团队`！ 虽然`Angular CLI`从一开始就非常好用，也有很多吐槽点（吐槽在最后），但是我们可以利用一些潜在的配置改进和最佳实践来使我们的项目更加完善！ ## 我们需要了解什么？ 1. 如何规划我们的模块 2. 如何使用应用程序和环境文件夹的别名来支持快捷导入 3. 如何使用Sass和Angular Material（或者NG-ZORRO，或者自己打造UI组件库） 4. 如何建立良好的生产构建 5. 如何不使用Phantom JS，而使用Headless Chrome代替测试 6. 如何通过自动生成的更新日志和正确的版本号来管理我们的项目 7. 如何通过CLI配置代理API请求 ## 安装和使用（需要科学上网，不然以下安装会有各种问题） 安装nodejs [官网](https://nodejs.org/en/)下载即可，**注意**：下载v8.x版本...
五一假期过后，[Angular6](https://github.com/angular/angular)发布正式版，相关联的UI组件库[Material](https://github.com/angular/material2) 和 脚手架[CLI](https://github.com/angular/angular-cli)，也一并发布6。 升级核心依赖: - [TypeScript](https://github.com/Microsoft/TypeScript) V2.7 - [RxJS](https://github.com/ReactiveX/rxjs) V6.0 工作中已经完成一个Angular6项目，这里来写一个简单的Angular6教程。 古语云：君子谋而后动，三思而后行。我们做一个功能，先规划功能细节。 先看个效果图：  在本文中，我们将构建一个Angular6 Todo web应用程序，允许用户: - 快速创建新的todo，使用输入框输入内容并按回车键 - 切换todo是完成的或不完成的 - 删除不再需要的todo - 双击修改未完成的todo - 批量删除已完成todo - 全选标记所有已完成或者取消全选标记所有未完成 这是一个[演示](https://jiayisheji.github.io/angular-todolist/)应用程序，我们将一步步从零构建它们。...