详解webpack+angular2开发环境搭建
程序员文章站
2023-02-24 11:28:22
刚搭建完一个webpack+angular2环境，由于angular及webpack官网上没有一个折中的搭建方案，所以只能摸索着搭建，中间遇到一些坑，遂总结记录下来，以供交...
刚搭建完一个webpack+angular2环境，由于angular及webpack官网上没有一个折中的搭建方案，所以只能摸索着搭建，中间遇到一些坑，遂总结记录下来，以供交流。
搭建完后的项目初步环境如下：
app ----app.component.ts ----app.module.ts ----main.ts index.html package.json tsconfig.json webpack.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';
//引入创建的component
import { 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"]
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。