使用webpack搭建typescript 开发环境

最新推荐文章于 2022-10-26 16:27:42 发布
最新推荐文章于 2022-10-26 16:27:42 发布
阅读量175 收藏
点赞数
文章标签： webpack json javascript ViewUI
原文链接：https://my.oschina.net/u/3170878/blog/855483
版权

一    创建目录

/src
--main.ts
--person.ts
index.html
package.json
tsconfig.json
webpack.config.js

二    配置三个文件

1.package.json文件配置

{
  "name": "zgz",
  "version": "1.0.0",
  "description": "this a typescript",
  "dependencies": {},
  "devDependencies": {
    "ts-loader": "^2.0.1",
    "typescript": "^2.2.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "author": "zgz",
  "license": "ISC"
}

2.tsconfig.json文件配置

{
    "compilerOptions": {
        "module": "commonjs",
        "sourceMap": true
    },
    "files": [
        "./src/main.ts"
    ]
}

3.webpack.config.js文件配置

module.exports = {
    entry: './src/main.ts',
    output: {
        filename: './dist/app.bundle.js'
    },
    module: {
        loaders: [{
            test: /\.ts$/,
            loader: 'ts-loader'
        }]
    },
    resolve: {
        extensions: ['.js', '.ts']
    }
}

三    码代码

main.ts

import Person from './Person';

let p =new Person('刑天','5000','战士');

document.write(p.say());

person.ts

 class Person {

      name: string
      age: string
      job: string

    constructor(name,age,job) {
        this.name = name;
        this.age = age;
        this.job = job;
     }

    say() {
        return `<h1>姓名：${this.name},<br>年龄：${this.age}。<br>职位：${this.job}</h1>`;
    }
}

export default Person;

index.html

<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <script type="text/javascript" src="./dist/app.bundle.js" charset="utf-8"></script>
</body>

</html>

四    运行

打开命令行工具

编译

webpack

启服务

webpack-dev-server

访问

在浏览器输入    localhost:8080

 

 

转载于:https://my.oschina.net/u/3170878/blog/855483

chewen4764
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用webpack搭建TypeScript环境
chengxuyuan3629的博客
10-16 1038
使用Webpack搭建环境
demo05 webpack + typescript
weixin_33755847的博客
05-25 255
1.关于 typescript typescript（简称 ts ）是 javascript 的超集，具有类型系统，是可编译的。可以想象得到，在代码运行之前能够进行代码类型检查和编译是多么重要的事儿（就像 Java 等强类型语言一样）。 比如前端框架 @Angular 就默认集成了 ts , 赋予了 @Angular 项目可以编译的功能。 对 ts 不了解的? 先撸一遍 ts 文档?：www....
Webpack+Typescript 简易配置
weixin_34033624的博客
02-14 197
教程：https://www.cnblogs.com/yasepix/p/9294499.html http://developer.egret.com/cn/github/egret-docs/extension/threes/instructions/index.html npm install webpack webpack-cli typescript ts-load...
TypeScript 使用Webpack搭建环境[转]
baidu_41388533的博客
03-21 363
TypeScript 使用Webpack搭建环境[转] 原文：TypeScript(二)使用Webpack搭建环境 TypeScript项目环境的基础配置 1. 创建一个简单的项目目录结构 新建一个新的目录：TsDemo，并且创建如下的目录结构 │ index.html ├─build │ webpack.config.js └─src main.ts 目录和文件夹结构分析: index.html是跑在浏览器上的模块文件 build文件夹中用于存放web
webpack+typescript
weixin_30686845的博客
02-10 90
1. npm install --save typescript 2. npm install --save ts-loader webpack.config.js module.exports = { entry: './app.ts', output: { filename: 'bundle.js' }, resolve: {...
webpack+typescript环境配置.zip
04-23
接下来，我们将深入探讨如何配置一个基于 Webpack 和 TypeScript 的开发环境，以及如何进行项目结构搭建和打包发布。 1. **安装依赖** 在创建新项目之前，首先确保已安装 Node.js。然后通过 `npm`（Node Package ...
Node.js-使用webpack搭建基于typescript的node开发环境template
08-10
本教程将深入探讨如何使用Webpack搭建一个基于TypeScript的Node.js开发环境。Webpack是一个模块打包工具，它能够处理JavaScript、CSS、图片等静态资源，而TypeScript是JavaScript的一个超集，提供静态类型系统，增强...
手动使用webpack配置vue3开发环境
最新发布
05-09
手动配置 Vue 3 开发环境需要以下步骤： 1. **安装基础依赖**：首先确保本地已经安装了 Node.js 和 npm。然后创建一个新的项目文件夹，通过 npm 初始化项目，运行 `npm init -y` 创建 package.json 文件。 2. **...
webpack-typescript-backed
03-30
标题 "webpack-typescript-backed" 暗示我们将探讨如何使用 Webpack 配合 TypeScript 来搭建后端支持的前端项目。下面我们将深入讨论这个主题。 1. **Webpack 基础**：Webpack 是一个模块打包器，它将应用的各个...
详解webpack+angular2开发环境搭建
12-10
在本文中，我们将深入探讨如何搭建一个基于Webpack和Angular2的开发环境。Angular2是一个流行的前端框架，而Webpack是一个强大的模块打包工具，它们结合在一起能够为开发者提供高效、灵活的项目构建流程。在搭建过程...
使用 Webpack + TypeScript 来创建项目【持续更新】
qq_42168187的博客
10-26 715
使用 Webpack + TypeScript 来创建项目【持续更新】
webpack + TypeScript搭建工程
weixin_42448623的博客
09-30 348
工程搭建 环境：浏览器 + 模块化 webpack: 构建工具，更据人口文件找寻依赖关系，打包 安装 npm i webpack webpack-cli -D 安装插件 npm i -D html-webpack-plugin clean-webpack-plugin webpack-dev-server webpack.config.js配置 devServer: { open: true, port: 8000 }, 配置命令 "scripts": { "start": "npx
webpack+TypeScript搭建工程化项目
meng_xiaoxiao的博客
08-11 434
2-7、clean-webpack-plugin:webpack中的清除插件，用于每一次构建时都清理打包目录下的文件。2-6、html-webpack-plugin:webpakc中html插件，用于自动创建html文件；2-5、ts-loader:ts加载器、用于在webpack中编译ts文件；2-3、webpack-dev-server:webpack开发服务器；2-2、webpack-cli:webpack命令行工具；2-4、typescript:ts编译器；2-1、webpack:构建工具；....
webpack4 + typescript 配置笔记
weixin_34144848的博客
10-15 418
最新需要写一些 js 的东西，正好就想试用一下 typescript 试用以后感觉舒服，那么需求来了，我们需要编译出来的文件，在外部可以调用，所以就有了下面的笔记 参考文章www.cnblogs.com/mahidol/p/8… npm 安装依赖 npm install --save-dev typescript ts-loader webpack webpack-cli 复制代码在项目根目录创建...
webpack配置typescript详解
晴空闲云
10-19 2737
随着现在typescript使用越来越多，作为打包工具界的webpack怎么编译typescript呢？ 下面我把自己的实践记录一下，成功编译了typescript文件，并且引入typescript模块后，也可以成功编译。 我们从新建webpack项目开始，在此之前先贴一下环境，经常环境不同会造成不同的状况，这边先贴上的环境： $ node -v v14.15.4 $ npm -v 6.14.10 $ webpack -v webpack: 5.58.2 webpack-cli: 4.9.0 we
vscode 调试 TypeScript
weixin_33884611的博客
11-09 136
环境 typescript :2.5.2vscode:1.16.0 vscode 直接调试 ts 文件 源码:github 安装 typescript 依赖 npm install typescript --save-dev 添加 tsconfig.json 主要是将 sourceMap 设置为true。 { "compiler...
Webpack搭建完整Typescript开发环境
热门推荐
nzyalj的博客
10-21 1万+
前言IDE提供了强大的纠错与补全能力，但是对于从开发时的编程语言实时转译，提供开发本地服务器以及自动刷新，到转为生产环境代码的编译，压缩，混淆代码以及打包，还是交给一些第三方工具的吧，对，我说的就是Typescript代替Javascript进行前端开发，第三方工具就说的是神器webpack。在此记录一下，下一次直接复制粘贴 :-p需求开发环境 即时编译为js，并自动刷新页面 生产环境 将es6/e
使用 Webpack 搭建前端 Typescript 模块化开发最小开发环境
若即的专栏
08-12 1954
使用 Webpack 搭建前端 Typescript 模块化开发最小开发环境 前言 题中所说的的Typescript最小开发环境是指能够模块化开发Web前端所需的最少组件组成的开发环境，所谓的模块化开发就是能够在分文件的情况下进行模块的分割和整合。虽然在不借助 Webpack 的情况下可以使用 Typescript 自带 namespace 实现模块化的开发，但相比于使用 import 和...
从零一步一步搭建TypeScript+webpack4开发环境
qq_40588413的博客
02-07 832
前言 相信大家都知道TypeScript的好处，TypeScript编译工具可以运行在任何服务器和任何系统上，TypeScript增加了代码的可读性和可维护性，很值得我们学习！ 下边我将带大家一步步实现TypeScript开发环境搭建~ 安装Node.js 相信大家电脑一般都安装了node.js 如果不确定是否安装了的话，可以在cmd里面输入以下命令： node -v 如果看到了版本号，则说...
搭建PHP源码阅读环境与深入理解PHP内核
11. **使用现代工具链**：Webpack、Babel等工具可以帮你管理和转换代码，以便在不同环境中运行，并引入最佳实践。 12. **模块化依赖管理**：使用npm或yarn管理外部库和依赖，确保版本一致性，方便升级和回滚。 13....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值