1.前言
配置
开怼
2. 分析上个章节的代码
这个报错是 说这个
person
是隐式的任意类型,其实就是这个
TS
要求这个变量必须有明确的类型,所以报错了指定类型就可以了
语法就是 变量后
: string
function sayHello(person:string) { return person+"吃了吗?" }
3. 然后编译 tsc 文件名
4. 在js中引入 编译后的js文件查看效果
我们在学习中就需要经常编译 ,经常的引入 ,想想都觉得的麻烦,
所以配置了文件,下面简单介绍下
5 环境初识配置
下面指令 会生成一个
tsconfig.json
文件
tsc --init
tsconfig.json
文件
6. package.json文件
npm init -y
7.依赖
这里面很多版本有问题 这是测试没有问题的,可以借鉴下
其中 脚本
scripts
是自己配置的,后面讲解其他都是常规的
webpack配置
{ "name": "TS", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --config ./webpack.config.js" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "html-webpack-plugin": "^3.2.0", "ts-loader": "^6.2.2", "typescript": "^4.3.5", "webpack": "^4.46.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.2" } }
8. webpack配置
/webpack.config.js
文件
HtmlWebpackPlugin
自动把 js文件入口引入到 指定的html
模板
public/index.html
是个空模板 什么都不用写
const path = require('path'); const HtmlWebpackPlugin = require("html-webpack-plugin") module.exports = { entry: './src/index.ts', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, resolve: { // 扩展名处理 extensions: [".js", ".ts", ".tsx"] }, // 开发阶段编译比较快 devtool: "cheap-module-eval-source-map", module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ //表示node_modules中的tsx文件不做处理 } ] }, plugins:[ new HtmlWebpackPlugin({ template:"./public/index.html" }) ], devServer: { // 启动gzip压缩 compress: true, // 默认端口 3000 port: 3000, //自动打开默认浏览器 open: true } }
9. 配置 运行指令
package.json
文件
--config
后面跟的是webpack.config.js
的路径,根据自己的需要修改
"scripts": { "dev": "webpack-dev-server --config ./webpack.config.js" },
10. 运行
根据我的配置 会自动打开浏览器
也支持热更新
npm run dev