微信小程序开发模板_详解webpack+angular2开发环境搭

摘要: 详细说明webpack+angular2开发设计自然环境构建 本文关键详细介绍了详细说明webpack+angular2开发设计自然环境构建,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下刚构...

详解webpack+angular2开发环境搭建       这篇文章主要介绍了详解webpack+angular2开发环境搭建,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

----ponent.ts
----app.module.ts
----main.ts

package.json
tsconfig.json
webpack.config.js
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';
//ponent
import { AppComponent } from './ponent';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; //引导跟模块启动应用 platformBrowserDynamic().bootstrapModule(AppModule); :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",
 "mon": "2.1.2",
 "piler": "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": "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.monjs文件,用于配置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"]

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:小程序开发