详解webpack+angular2开发环境搭建

2019-11-19 16:13:47

字体：大中小

来源：转载

供稿：网友

刚搭建完一个webpack+angular2环境，由于angular及webpack官网上没有一个折中的搭建方案，所以只能摸索着搭建，中间遇到一些坑，遂总结记录下来，以供交流。

搭建完后的项目初步环境如下：

app----app.component.ts----app.module.ts----main.tsindex.htmlpackage.jsontsconfig.jsonwebpack.config.js

app.componnet.ts：组件文件。angular2应用是由组件构成，组件控制视图；

import { Component } from '@angular/core';@Component({ selector: 'my-app', template: `  <h1>{{title}}</h1>  <h2>My favorite hero is: {{myHero}}</h2>  `})// 使用变量初始化方式export class AppComponent { title = 'Tour of Heroes'; myHero = 'Windstorm';}

app.module.ts：应用跟模块。angular是模块化，拥有自己的模块系统，被称为angular模块或NgModules（深入了解）；//缺少下述模块引入，会输出"Uncaught reflect-metadata shim is required when using class decorators"的错误

import 'core-js/es6';import 'core-js/es7/reflect';import 'zone.js/dist/zone';//引入NgModule装饰器import { NgModule }   from '@angular/core';//引入浏览器模块import { BrowserModule } from '@angular/platform-browser';//引入创建的componentimport { AppComponent } from './app.component';@NgModule({ imports:   [ BrowserModule ], declarations: [ AppComponent ], bootstrap:  [ AppComponent ]})export class AppModule { }

main.ts：用于引导跟模块启动应用；

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule }       from './app.module'; //引导跟模块启动应用platformBrowserDynamic().bootstrapModule(AppModule);index.html：angular应用宿主页面；<!DOCTYPE HTML><html lang="zh-CN"><head>  <meta charset="UTF-8" />  <meta name="viewport" content="width=device-width" />  <title>small胖的博客</title></head><body>  <my-app></my-app>  <script src="dist/bundle.js"></script></body></html>

package.json：一个标准化的npm说明文件，其中包含诸如当前应用的依赖包、自定义的脚本命令等，在cmd终端可用npm init自动创建该文件；

注意，此处如果引入的angular模块版本是2.4.X，则会报错“Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators”，产生此坑的具体原因尚不清楚，希望有朋友一起交流。

{ "name": "blogcode", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": {  "ts-loader": "2.0.0",  "@angular/common": "2.1.2",  "@angular/compiler": "2.1.2",  "@angular/core": "2.1.2",  "@angular/platform-browser": "2.1.2",  "@angular/platform-browser-dynamic":"2.1.2",  "rxjs": "5.0.0-beta.12",  "zone.js": "0.6.26",  "core-js": "^2.4.1" }, "devDependencies": {  "webpack": "^2.2.1",  "@types/core-js": "^0.9.35",  "typescript": "^2.1.5",  "webpack": "^2.2.0",  "webpack-dev-server": "^2.3.0" }, "scripts": {  "test": "echo /"Error: no test specified/" && exit 1" }, "repository": {  "type": "git",  "url": "https://git.coding.net/frankshin/xudengwei.git" }, "author": "", "license": "ISC"}

tsconfig.json：用于定义typescript编译成ES5的各项参数；

{  "compilerOptions": {    "module": "commonjs",    "target": "es5",    "moduleResolution": "node",    "noImplicitAny": true,    "removeComments": true,    "emitDecoratorMetadata": true,    "experimentalDecorators": true,    "sourceMap": true,    "declaration": false  },  "buildOnSave": false,  "compileOnSave": false,  "exclude": [    "node_modules"  ]}

webpack.config.js：一个标准化的commonjs文件，用于配置webpack编译打包的参数。

module.exports = {  entry: "./app/main.ts",  output: {    path: __dirname + '/dist',    filename: "bundle.js"  },  module: {  rules: [    {     test: //.tsx?$/,     loader: 'ts-loader',     exclude: /node_modules/,    },  ]  },  resolve: {   extensions: [".tsx", ".ts", ".js"]  }};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：微信小程序之网络请求简单封装实例详解

下一篇：JavaScript中最常用的10种代码简写技巧总结