構建 [Angular] 开发环境

1 年 ago

科, 颖

1 minute

首先

本文基于 Angular v4.x.x 进行描述，但内容已经过时。因此可能与最新版本的 Angular 提供的功能不匹配。

请在 Angular 日本语文档中查看有关最新信息，以了解如何设置本地环境和工作区。

执行这篇文章的环境（截至2017/12/21更新）

Angular v4.3.2 v4.4.6

構建Angular的开发环境。

基本上，这是对原网站的本地环境和工作空间设置内容进行重述。

前提 – 必须只提供一个选项，中文原生地来解释以下内容：

请确认已安装了Node.js（请参考本文）

建立环境

2017年9月2日の追記によると，IE11に対応しています。

在Angular中，默认设置下无法在IE11中使用应用程序。这是因为在IE11以前，Angular使用的功能不受支持。
为了解决这个问题，需要进行Polyfill的设置。
下面是设置的步骤：

src/polyfills.ts を編集する。

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

只要將以 IE9 起始並帶有 import 執行的區塊取消註解，就能啟用它們。
這樣一來，即使是在 IE11 中，也能使用 Angular 應用程式。

结束了

Angular的开发环境已经搭建完成，接下来只需要根据项目需求添加相应的库。

请参考

由于Angular的教程是用英文编写的，所以对一些人来说可能很难入门。因此，我会提供下面的内容作为参考信息。

https://github.com/ng-japan/hands-on/

其他

Angular是用TypeScript进行开发的，所以在进行浏览器执行时会出现编译问题。
但如果使用Angular-CLI构建项目，由于其基于webpack，所以在编译方面（起初）可以不用考虑。
可能会有一些想要进行微调的情况，可以提取并修改webpack配置，但是我还没有遇到过这种情况，所以本文不涉及这部分。