环境安装
- npm install typescript -g //全局安装ts
- npm init -y //初始默认npm的package.json配置
- npm install -g tslint //全局安装tslint检查代码
- tsc --init //初始化typescript,会生成tsconfig.json
目录结构
- src:存放项目的开发资源,在 src 下创建如下文件夹:
- utils:和业务相关的可复用方法
- tools:和业务无关的纯工具函数
- assets:图片字体等静态资源
- api:可复用的接口请求方法
- config:配置文件
- typings:模块声明文件
- build:webpack 构建配置
项目下也要安装typescript配合webpack进行编译和本地开发: npm install typescript
运行 tslint -i 生成tslint 配置文件
配置webpack
npm install webpack webpack-cli webpack-dev-server -D
- npm install cross-env
在package.json下配置
{
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js" //开发环境
}
}
在webpack.config.js下配置:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
// 指定入口文件
// 这里我们在src文件夹下创建一个index.ts
entry: "./src/index.ts",
// 指定输出文件名
output: {
filename: "main.js"
},
resolve: {
// 自动解析一下拓展,当我们要引入src/index.ts的时候,只需要写src/index即可
// 后面我们讲TS模块解析的时候,写src也可以
extensions: [".tsx", ".ts", ".js"]
},
module: {
// 配置以.ts/.tsx结尾的文件都用ts-loader解析
// 这里我们用到ts-loader,所以要安装一下
// npm install ts-loader -D
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /nodemodules/
}
]
},
// 指定编译后是否生成source-map,这里判断如果是生产打包环境则不生产source-map
devtool: process.env.NODEENV === "production" ? false : "inline-source-map",
// 这里使用webpack-dev-server,进行本地开发调试
devServer: {
contentBase: "./dist",
stats: "errors-only",
compress: false,
host: "localhost",
port: 8089
},
// 这里用到两个插件,所以首先我们要记着安装
// npm install html-webpack-plugin clean-webpack-plugin -D
plugins: [
// 这里在编译之前先删除dist文件夹
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ["./dist"]
}),
// 这里我们指定编译需要用模板,模板文件是./src/template/index.html,所以接下来我们要创建一个index.html文件
new HtmlWebpackPlugin({
template: "./src/template/index.html"
})
]
};
常见错误:
- CleanWebpackPlugin is not a constructor: CleanWebpackPlugin 的导出有问题,可以看到 CleanWebpackPlugin 源文件是 export { CleanWebpackPlugin },所以引入时也要 const { CleanWebpackPlugin } from ''
- webpack Dev Server Invalid Options options should NOT have additional properties: config.devServer 配置出了问题,看下是不是变量名写错了等等
创建HTML 模板
- 在webpack.config.js中已经配置过
new HtmlWebpackPlugin({
template: "./src/template/index.html" //在该目录下创建index.html
}) //所以打包后会根据这个html生成页面的入口
启动服务: npm run start
Compiled successfully. 即启动成功
可以访问localhost:xx 访问页面,因为是热更新,所以你可以在index.html添加一些内容可以看到重新编译成功,同时页面也发生了改动
添加打包配置
//在 package.json 的 scripts 里增加 build 指令:
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env NODEENV=development webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build": "cross-env NODEENV=production webpack --mode=production --config ./build/webpack.config.js"
}
}
打包
npm run build
如果打包成功,会在当前目录生成dist=>index.html&main.js
Comments | NOTHING