npm 包 Angular_ES6_Webpack_Starter 使用教程

Angular_ES6_Webpack_Starter 是一个基于 Webpack，ES6 和 Angular 搭建的前端架构，它的目的是帮助开发者快速搭建一个基于 Angular 的前端项目。该包内置了许多常用的工具和功能，例如 Sass、Webpack Dev Server、Karma 和 Jasmine 等，可以帮助我们开启项目开发的快速和简单。

安装和使用

首先需要安装 Node.js 环境，然后使用 NPM 包管理工具安装 Angular_ES6_Webpack_Starter，步骤如下：

npm install -g angular-cli
ng new my-app
cd my-app
npm install angular_es6_webpack_starter --save-dev

当安装完成后，我们需要在 package.json 文件中配置启动命令：

"scripts": {
  "start": "webpack-dev-server --config ./node_modules/angular_es6_webpack_starter/webpack.config.js --progress --profile --watch",
  "build": "webpack --config ./node_modules/angular_es6_webpack_starter/webpack.config.js --progress --profile",
  "test": "karma start ./node_modules/angular_es6_webpack_starter/karma.conf.js",
}

执行 npm start 进行开发，在浏览器打开 http://localhost:8080 查看效果。执行 npm run build 进行打包，执行 npm test 进行单元测试。

配置和扩展

在 Angular_ES6_Webpack_Starter 中，所有的配置文件都在 node_modules/angular_es6_webpack_starter 目录下。如果需要修改配置，可以将该目录下的相应配置文件复制到项目根目录下，然后进行修改。例如我们可以将 webpack.config.js 复制到项目根目录下，然后修改 entry 来添加入口文件：

entry: {
  app: './app/app.module.js',
  vendors: ['angular']
},

然后再将启动命令中的文件路径改为相应的文件即可。除此之外我们还可以修改 Sass 编译配置、ESLint 配置、Jasmine 测试工具的配置等，这些配置项都在 node_modules/angular_es6_webpack_starter 目录下。

Angular_ES6_Webpack_Starter 也非常容易扩展。我们可以根据自己的需求添加相应的依赖，然后在相应的模块中进行配置和编写代码即可。例如我们可以装上 angular-animate 模块，然后在模块中进行配置和使用：

npm install angular-animate --save

import angular from 'angular';
import ngAnimate from 'angular-animate';
import config from './app.config';
import AppComponent from './app.component';

angular.module('app', [ngAnimate])
  .config(config)
  .component('app', AppComponent);

总结

Angular_ES6_Webpack_Starter 是一个非常棒的前端框架，它可以帮助我们快速搭建一个基于 Angular 的前端项目，并且具有非常强的可扩展性。我们可以在该基础上进行二次开发，添加所需的依赖，然后在自己的项目中使用。同时，该项目的结构和配置也非常清晰，可以帮助我们更好地理解 Angular 和 Webpack 的使用方法和技巧，具有非常强的学习价值和指导意义。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/106077