- 安装node
- 安装typescript编译环境
npm install -g typescript
-
实现实时预览效果
具体步骤如下:
3.1 安装依赖
在项目根目录下运行以下命令安装 webpack 相关的依赖:
npm install webpack webpack-cli webpack-dev-server ts-loader typescript -D
3.2 配置 webpack.config.js
在项目根目录下创建 webpack.config.js 文件,并添加以下代码:
module.exports = { mode: "development", entry: "./src/index.ts", // 入口文件路径 output: { filename: "bundle.js", // 输出文件名 }, resolve: { extensions: [".ts", ".tsx", ".js", ".jsx"], }, devServer: { static: "./dist", // 资源文件的根目录 open: true, // 自动打开浏览器 hot: true, // 开启模块热替换 }, module: { rules: [ { test: /\.(ts|tsx)$/, use: "ts-loader", }, ], }, };
以上配置说明:
- mode: "development":设置为 development 模式。
- entry: "./src/index.tsx":入口文件路径。
- output: {}:输出文件配置。
- resolve: {}:配置可以省略的文件后缀。
- devServer: {}:开发服务器配置。
- module: {}:模块加载器配置。
3.3 配置 package.json
在项目的 package.json 文件中添加以下代码:
{ "scripts": { "dev": "webpack serve --config webpack.config.js", "build": "webpack --config webpack.config.js" } }
以上代码中:
- dev:启动 webpack-dev-server。
- build:编译项目。
3.4 编写 TypeScript 代码
在 src 目录下创建 TypeScript 文件,例如 index.tsx,具体代码如下:
function greeter(person: string) { return "Hello, " + person; } let user = "TypeScript"; document.body.innerHTML = greeter(user);
3.5 编译和查看效果
在终端中运行以下命令,启动开发服务器:
npm run build npm run dev
此时,在浏览器中打开 http://localhost:8080,即可看到 "Hello, TypeScript" 的输出,同时当修改代码之后,浏览器中也会实时更新。
-
执行ts代码
// compile to js
tsc index.ts
// run js
node index.js
src
目录:包含所有源代码文件,包括 TypeScript、CSS、HTML、图片等。public
目录:包含所有公共文件,例如静态资源文件、第三方库文件等。dist
目录:包含所有打包后的文件,用于部署到生产环境。test
目录:包含所有测试文件,用于测试代码的正确性和性能。config
目录:包含所有配置文件,例如 Webpack 配置文件、环境变量配置文件等。node_modules
目录:包含所有依赖项,例如第三方库、工具等。docs
目录:包含所有文档文件,例如项目说明、API 文档、学习文档等。scripts
目录:包含所有脚本文件,例如构建脚本、部署脚本等。server
目录:后端服务器代码mock
目录:包含所有mock文件,例如mock数据、mock接口等。
在 src
目录中,通常会按照功能或模块划分子目录,例如:
components
目录:包含所有组件代码。pages
目录:包含所有页面代码。utils
目录:包含所有工具函数代码。styles
目录:包含所有样式代码。assets
目录:包含所有图片、字体等资源文件。
在 `public` 目录中,通常会按照功能或模块划分子目录,例如:
public/
├── images/
│ ├── logo.png
│ ├── banner.jpg
│ └── ...
├── favicon.ico
└── index.html
在 `test` 目录中,通常会按照功能或模块划分子目录,例如:
test/
├── components/
│ ├── Button.test.tsx
│ ├── Input.test.tsx
│ └── ...
├── pages/
│ ├── Home.test.tsx
│ ├── About.test.tsx
│ └── ...
└── ...
在 `config` 目录中,通常会按照功能或模块划分子目录,例如:
config/
├── webpack/
│ ├── webpack.common.js
│ ├── webpack.dev.js
│ ├── webpack.prod.js
│ └── ...
├── babel.config.js
├── jest.config.js
└── ...
在 `docs` 目录中,通常会按照功能或模块划分子目录,例如:
docs/
├── api/
│ ├── README.md
│ ├── Button.md
│ ├── Input.md
│ └── ...
├── learning/
│ ├── README.md
│ ├── React.md
│ ├── TypeScript.md
│ └── ...
└── ...
在 `scripts` 目录中,通常会按照功能或模块划分子目录,例如:
scripts/
├── build/
│ ├── build.js
│ ├── build.css.js
│ ├── build.html.js
│ └── ...
├── deploy/
│ ├── deploy.js
│ ├── deploy.css.js
│ ├── deploy.html.js
│ └── ...
└── ...
- src/下写模块代码
- test/下写测试代码,测试代码的文件名必须以.test.tsx结尾
- 执行测试命令
npm test -- --config=config/jest.config.js