• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

webpack配置typescript项目

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

有时候我们需要创建一个单单使用typescript的项目,如:我们想使用typescript开发一个网页游戏,如果使用ts文件,每次写完都要tsc的方式输出相应的js文件,我们想能不能通过使用webpack的方式自动编译自动输出。具体实现方式如下:

  • 首先创建一个项目文件,如果没有安装typescript: cnpm install -g typescript
  • 创建tsconfig.json文件,也可以使用tsc --init 的方式生成,并修改成如下:(这个主要是用来单独配置ts的输出的,如果你使用vs的终端选项的Task,可以自动监控这个json文件,从而达到自动输出js文件的效果,这个配置文件本质来说和webpack的打包没有关系。
    {
        "compileOnSave": false,
        "compilerOptions": {
          "outDir": "./dist/js",// 打包到的目录
          "sourceMap": true,// 是否生成sourceMap(用于浏览器调试)
          "noImplicitAny": false,
          "noUnusedLocals": true,
          "noUnusedParameters": true,
          "declaration": true,// 是否生成声明文件
          //"declarationDir": "./dist/types/",// 声明文件打包的位置
          "declarationMap": false,// 是否生成声明文件map文件(便于调试)
          "moduleResolution": "node",
          "module": "esnext",
          "target": "es5",// 转化成的目标语言
          "baseUrl": "./",
        },
        "include": [  // 通过终端的task,会自动监视ts代码变化输出结果到dist中
          "src/**/*.ts"
        ],// 要打包的文件
        "exclude": [ // 排除那些文件不打包
          "node_modules",
          "*.test.ts"
        ]
    }
    // 使用了tsconfig.json后可以简单地使用tsc命令就能自动编译
  • 创建文件目录:(需要创建的是dist/js、src/app.ts、index.html、webpack.dev.config.js)

 

  • 使用命令:cnpm init 自动生成package.json文件
  • 执行如下命令,安装webpack相关的组件:cnpm install webpack webpack-cli typescript ts-loader --save-dev
  • 编辑之前创建的webpack.dev.config.js文件:
    const path = require('path')
    module.exports={
        entry:'./src/app.ts',
        output:{
            path:path.resolve(__dirname,"dist/js"),
            filename:'bundle.js'
        },
        module: {
            rules: [  // 添加解析规则
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/,
                },
            ]
        },
        resolve: {   // 需要打包的文件后缀
            extensions: [".tsx", ".ts", ".js"]
        }
    }  
  • 修改package.json文件(其中涉及到的是webpack需要的包,以及启动命令)

    {
      "name": "ts_game_web",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --config ./webpack.dev.config.js --mode development"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "html-webpack-plugin": "^4.3.0",
        "ts-loader": "^7.0.5",
        "typescript": "^3.9.3",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.11.0"
      }
    }  
  • 此时的app.ts文件如下:
    namespace TSE {
        export class Engine {
    
            private _count:number = 0;
            public constructor() {
            }
    
            public start(): void {
                this.loop();
            }
    
            private loop():void {
                // 告诉浏览器下一次渲染之前需要调用的函数,而通常显示器的刷新频率是 60Hz,
                // 即每秒重绘 60次,所以只要在回调函数中继续调用 requestAnimationFrame(callback) 
                // 执行自己,就能达到约每秒执行 60 次回调函数。
                this._count ++ ;
                document.title = this._count.toString();
    
                requestAnimationFrame(this.loop.bind(this))
            }
        }
    }
    
    window.onload = function() {
        let e = new TSE.Engine();
        e.start();
        document.body.innerHTML += "Foo";
    }  
  •  

    index.html文件
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>Page Title</title>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
    </head>
    <body>
        <script src="./dist/bundle.js"></script>
    </body>
    </html>
    

      

  •  

    如果想在本地有一个服务,每次修改代码都会触发一次生成编译,这时候我们需要有以下操作:
    • 安装 webpack-dev-server插件:cnpm install webpack-dev-server html-webpack-plugin --save-dev
    • 修改webpack.dev.js:
      const path = require('path')
      const HtmlWebpackPlugin = require('html-webpack-plugin')
      module.exports={
          entry:'./src/app.ts',
          output:{
              path:path.resolve(__dirname,"dist/js"),
              filename:'bundle.js'
          },
          module: {
              rules: [  // 添加解析规则
                  {
                      test: /\.tsx?$/,
                      loader: 'ts-loader',
                      exclude: /node_modules/,
                  },
              ]
          },
          resolve: {   // 需要打包的文件后缀
              extensions: [".tsx", ".ts", ".js"]
          },
          plugins:[
              new HtmlWebpackPlugin({
                  template:'index.html'
              })
          ],
          devServer:{
              contentBase:path.join(__dirname,'.'),
              open:true,
              port:9000
          }
      }  
    •  

       package.json文件修改:
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
        },
      

        

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
记一次使用vue+typescript做微信公众号网页分享的坑 - ygunoil发布时间:2022-07-18
下一篇:
vue-cli+webpack-simple+typescript入门发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap