前提：
cmd窗口安装typescript和cnmp
- 全局安装typescript:npm install -g typescript
- 安装淘宝镜像:npm install -g cnpm --registry=https://registry.npmmirror.com
vscode控制台安装插件和相关：
步骤
- 下载package.json：npm init -y
- cnpm i -D webpack webpack-cli typescript ts-loader
- cnpm i -D html-webpack-plugin:用来创建模板
- cnpm i -D webpack-dev-server：浏览器自动打开
- cnpm i -D clean-webpack-plugin：是删除webpack打包后的文件夹以及文件
- cnpm i -D @babel/core @babel/preset-env babel-loader core-js：安装babel：
- 创建webpack.config.js文件，编辑配置信息
- 在项目文件根目录中运行
tsc --init 创建tsconfig.json - 执行打包：npm run bulid
- 启动：npm start
package.json中的相关配置：
package.json中，script中添加
- "build": "webpack --mode development",（编译）
- "start":"webpack server --open chrome.exe" (浏览器自动打开)
1 {
2 "name": "part3",
3 "version": "1.0.0",
4 "description": "",
5 "main": "index.js",
6 "scripts": {
7 "build": "webpack --mode development",
8 "test": "echo \"Error: no test specified\" && exit 1",
9 "start": "webpack serve --open"
10 },
11 "keywords": [],
12 "author": "",
13 "license": "ISC",
14 "devDependencies": {
15 "@babel/core": "^7.19.1",
16 "@babel/preset-env": "^7.19.1",
17 "babel-loader": "^8.2.5",
18 "clean-webpack-plugin": "^4.0.0",
19 "core-js": "^3.25.2",
20 "ts-loader": "^9.3.1",
21 "typescript": "^4.8.3",
22 "webpack": "^5.74.0",
23 "webpack-cli": "^4.10.0",
24 "webpack-dev-server": "^4.11.0"
25 }
26 }
View Code
webpack.config.js
创建dis文件夹、index.html和index.ts模板:
文件目录：
index.html:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>网页模板</title> 7 </head> 8 9 <div id="box1"> 我是一个div</div> 10 11 </html>View Code
index.ts:
1 function sum (a:number,b:number):number{
2 return a+b;
3 }
4 console.log(sum(123,456));
View Code
webpack.config.js
1 //引入一个包
2 const path = require("path");
3 //实时自动构建，自动刷新浏览器
4 const HTMLWebpackPlugin = require("html-webpack-plugin");
5 const {CleanWebpackPlugin} = require("clean-webpack-plugin");
6
7 //webpack中的所有的配置信息都应该写在module.exports中
8 module.exports ={
9 // 代表webpack运行的模式，可选值有两个 developmnet和prodution
10 mode:'development',
11 //指定文件路口
12 entry: path.join(__dirname,'./src/index.ts'),
13 //指定打包文件所在目录
14 output:{
15 //指定打包文件的目录
16 path:path.resolve(__dirname,'dist'),
17 //打包后文件的文件
18 filename:"bundle.js",
19 //告诉webpack不使用箭头函数
20 environment:{
21 arrowFunction:false
22 }
23 },
24 //指定webpack打包时要使用的模板
25 module:{
26 //指定加载的规则
27 rules:[{
28 //test指定的是规则生效的文件
29 test:/\.ts$/,
30 //要使用的loader,执行顺序：从后往前
31 use:[
32 //配置babel
33 {
34 //指定加载器
35 loader:"babel-loader",
36 options:{
37 //指定预定义环境
38 presets:[
39 [
40 //指定环境插件
41 "@babel/preset-env",
42 //配置信息
43 {
44 //要兼容的目标浏览器
45 targets:{
46 "chrome":"105"
47 },
48 //指定codejs版本
49 "corejs":"3",
50 //使用codejs的方式
51 "useBuiltIns":"usage"
52 }
53 ]
54
55 ]
56 }
57
58 },
59 'ts-loader'],
60 //要排除的文件
61 exclude:/node-modules/
62 }]
63 },
64 plugins:[
65 new HTMLWebpackPlugin({
66 //title:"自定义"
67 template:"./src/index.html"//生成一个模板
68 })
69 // , new CleanWebpackPlugin(),
70 ],
71 //用来设置引用模块
72 resolve:{
73 extensions:['.ts','.js']
74 }
75
76 }
View Code
tsconfig.js
1 /*
2 tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
3 "include"用来指定哪些ts文件需要被编译 ** 代表任意目录，* 表示任意文件
4 "include":[
5 ".src/**//*"
6 ]
7
8 exclude:表示不需要被编译的文件目录
9 "include":[
10 ".src/hello/**//*"
11 ]
12 extends:定义被继承的配置文件
13 "extends":"./configs/base"
14
15 "compilerOptions" 编译器的选项
16
17 **/
18
19
20 {
21 "compilerOptions": {//"compilerOptions" 编译器的选项
22
23 "target": "es2016", //用来指定ts被编译的ES版本 /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
24
25 "module": "commonjs", // 模块指定要使用的模块化的规范 /* Specify what module code is generated. */
26 //"lib":[],//lib用来指定项目中要使用的库，一般不需要动
27 //"outDir": "",//用来指定编译后文件所在的目录
28 //"outFile": "./dist/app.js",//将代码合并为一个文件，设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
29 //"allowJs": false,//是否对js文件编译，默认是false
30 //"checkJs": false,//是否检查js代码是否符合语法规范，默认是false
31 //"removeComments": false,//编译完的文件是否移除注释
32 //"noEmit": false,//不生成编译后的文件
33 //"noEmitOnError": false,//当有错误不生成编译后的文件
34 //"alwaysStrict": false,//用来设置编译后的文件是否使用严格模式，默认是false
35 //"noImplicitAny": false,//不允许隐试any类型，比如函数的形参，不允许是any类型的；
36 //"noImplicitThis": false,//不允许不明确类型的this，比如函数中的this
37 //"strictNullChecks": false,//严格检查空值,检出可能存在的空的值
38 "esModuleInterop": true,// /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
39 "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
40
41 //所有严格检查的总开关，它是true,所有的严格检查都开启，它是false，,所有的严格检查都开关闭，推荐开启
42 "strict": true, /* Enable all strict type-checking options. */
43 "skipLibCheck": true /* Skip type checking all .d.ts files. */
44 }
45 }
View Code
运行效果：
标签：文件,false,babel,手动,ts,js,webpack,typescrip From： https://www.cnblogs.com/lixiuming521125/p/16657227.html