从零构建一个TS-Node项目

最新推荐文章于 2024-08-24 07:27:43 发布
最新推荐文章于 2024-08-24 07:27:43 发布
阅读量1.8k 收藏
点赞数
分类专栏： node 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38355456/article/details/103931750
版权
本文档将从总体概括、装包问题、代码规范、测试部分和代码构建等方面，详细讲解如何从零构建一个TS-Node项目。推荐使用yarn进行包管理，并集成eslint、prettier和commitlint来确保代码质量和规范。测试部分介绍了jest和ts-jest的使用，同时提供了项目配置的参考链接。
摘要由CSDN通过智能技术生成

总体概括

因为搭建的是node项目， 所以比前端项目搭建要简单很多。

从以下因素考虑

  • 装包问题
    • yarn
    • 配置项： .yarnrc 、.npmrc
    • .gitignore
  • 代码规范
    • eslint
    • prettier
    • commititlint
    • 每次提交自动检测eslint\commitLint
  • 测试
    • jest、ts-jest
  • 代码构建
    • tsconfig
    • typeings

装包问题

这个问题比较简单没有什么好说的， 推荐 yarn , 如果是非常复杂的项目， 推荐使用 yarn/workSpace + lerna 组合拳， 爽歪歪。

.yarnrc:

registry "https://registry.npm.taobao.org"

npmrc:

registry = https://registry.npm.taobao.org

.gitignore:

# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
node_modules/

# testing
coverage/
/doc/
/mock2easy/

# production
/build
/coverage

worker/

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.idea
.idea/
/packages/**/*.js
/packages/**/*.js.map
!jest.config.js

tempDownload/

npm-debug.log*
yarn-debug.log*
yarn-error.log*
yarn.lock
package-lock.json

代码规范

集成eslint、prettier、recommended
.eslintrc.js:

module.exports = {
   
  parser: '@typescript-eslint/parser',
  parserOptions: {
   
    ecmaFeatures: {
   
      jsx: true,
    },
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'prettier',
    'prettier/@typescript-eslint',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:prettier/recommended',
  ],
  env: {
   
    node: true,
    browser: false,
  },
  rules: {
   
    '@typescript-eslint/no-var-requires': 1,
    '@typescript-eslint/explicit-function-return-type': 2,
    '@typescript-eslint/explicit-member-accessibility': 2,
    'no-unused-vars': 2,
    semi: [2, 'always', {
    omitLastInOneLineBlock: true }],
  },
};

.prettierrc:

{
   
  "singleQuote": true,
  "trailingComma"
最低0.47元/天 解锁文章
晴小篆
关注
专栏目录
ts-node-dev:编译您的TS应用程序，并在修改文件后重新启动
04-01
ts-node-dev 下找到版本使用引擎盖下。 当任何所需文件发生更改时（作为标准node-dev ），它都会重新启动目标节点进程，但在重新启动之间共享编译过程。 与node-dev -r ts-node/register ... ， nodemon -x ts-node ...变体相比，这大大提高了重新启动的速度，因为不需要每次都实例化ts-node编译。 安装 yarn add ts-node-dev --dev npm i ts-node-dev --save-dev 用法 ts-node-dev [node-dev|ts-node flags] [ts-node-dev flags] [node cli flags] [--] [script] [script arguments] 因此，您只需结合使用和选项（请参阅这些软件包的文档）： ts-node-dev --res
node项目(express)从零开始构建TypeScript
温壁
09-16 1348
1、标注：本案例使用ejs模板，express框架，编辑器为vscode 2、开始准备工作，首先全局安装express、typescript、ts-node,nodemon，网络不好用cnpm npm i express -g//全局安装express npm i -g typescript//全局安装ts编译工具 npm i -g ts-node//全局安装ts运行工具 npm install -g nodemon//全局安装nodemon 3、然后开始新建一个node项目，打开vscode，控制
推荐项目：TypeScript 动力引擎 —— Ts-node
最新发布
gitblog_00673的博客
08-24 651
推荐项目：TypeScript 动力引擎 —— Ts-node ts-nodeTypeScript execution and REPL for node.js项目地址:https://gitcode.com/gh_mirrors/ts/ts-node 在快速发展的软件开发领域，TypeScript 作为JavaScript的超集，其强类型和现代语言特性极大地提升了开发效率与代码质量。而当我们谈...
【node+ts】搭建node+typescript项目
weixin_45696837的博客
07-15 2743
【node+ts】搭建node+typescript项目
从0到1使用TS实现一个node.js脚手架工具
前端萌新
05-01 1122
.
amd模块化——typeScript下载于安装以及运行 ——yarn下载——TS的运行——Ts数据类型描述
阿牛哥的博客
08-11 764
amd模块化——typeScript下载于安装以及运行 ——yarn下载——TS的运行——Ts数据类型描述
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
11-26
首先，我们提到Node.js有一个工具叫做`ts-node`，它可以让我们直接在Node环境中运行TypeScript代码。`ts-node`会自动编译TypeScript到JavaScript，然后执行。但是，这种方法存在一些问题，比如TypeScript的路径配置...
esbuild-node-tsc:使用快速的esbuild构建Typescript Node.js项目
03-18
esbuild-node-tsc读取tsconfig.json并使用esbuild构建打字稿项目。 esbuild是最快的打字机生成器。它还会将非ts文件（例如json，graphql文件，图像等）复制到dist文件夹。如果资产没有正确复制，请查看下面的配置...
ts-node-api:Yeoman Generator使用TypeScript构建自己的Node Express Web API
05-17
首先，使用安装和generator-ts-node-api（假设您已经预安装了 ）。 npm install -g yo npm install -g generator-ts-node-api 然后生成您的新项目： yo ts-node-api 运行API 发展 要以开发模式启动应用程序，请...
ts-node-starter
02-15
"ts-node-starter" 是一个基于 TypeScript 的 Node.js 项目模板，它旨在简化新项目的启动过程，特别是对于那些希望利用 TypeScript 强大的静态类型检查功能的开发者。这个模板包含了必要的配置和工具，使得开发环境...
nodeJS项目创建
mbshqqb的博客
11-11 7121
项目创建 来用命令创建一个nodejs项目 通过idea或者pycharm之类的创建项目的过程中有很多坑 安装node.js插件 创建nodes.js项目 设置项目配置（除了项目名称和路径外其他的按默认走） 正常情况下会报错 Error creating Node.js Express App. Cannot find C:\Users\MVGOS\AppData\Local\Temp\int...
新手简单创建Node服务项目
weixin_43386443的博客
03-17 1240
👩🏻‍🍳 环境准备 node v16.3.2 npm v8.1.2 vscode (这是IDE) 🔋 进度条 - - - - - 1、创建项目 2、支持TS 3、支持 koa 和 koa-router 4、配置热更新 nodemon 6、支持 eslint 👉🏻 Step 1 （创建项目） mkdir node-web && cd ./node-web && npm init -y 1、 创建一个 node-web 的项目 2、然后创建 src文件夹，在
创建一个react+ts的项目
热门推荐
weixin_59424057的博客
03-08 1万+
首先打开命令框输入：create-react-app index --template typescript 创建完成后输入：cd index 然后安装自己所需的项目依赖：yarn add ...... 安装完成后输入：yarn start 现在创建的项目就跑起来了。 我在创建项目是安装的依赖项有： yarn add styled-components -S yarn add @types/styled-components -S yarn add react-redux -S yarn
ts-node 的使用
weixin_42712337的博客
10-14 1860
安装 ts-node 需要在全局去安装。这里要用 npm 去全局安装，yarn 全局安装好像用不了 ts-node 全局安装： npm install -g typescript npm install -g ts-node 本地安装：用npx ts-node 程序名 npm install typescript npm install ts-node 简单程序：test.ts constoutput="Helloworld" console.log(output)...
如何搭建TS的React项目
weixin_43867229的博客
04-19 379
10.运行验证： 现在你可以访问 http://localhost:3000/home 查看效果了。
typescript安装ts-node执行报错
weixin_46643178的博客
10-15 1640
1.初次使用ts 安装ts-node编译报错 1.1安装typescript npm install typescript -g || yarn global add typescript 1.2安装ts-node执行代码 npm install -g ts-node 2.此时再安装 npm install -D tslib @types/node 3.再执行 ts-node 文件名就可以了 ...
2-1-3 TS 环境和配置
m0_38066007的博客
04-29 676
ts-node Node 环境的 typescript 解释执行器。REPL（Read eval print loop） 需要安装 @types/node npm i -g ts-node # yarn global add ts-node npm i @types/node # yarn add @types/node 用 ts-node 执行文件 ts-node some.ts 配置文件： tsconfig.json { "compilerOptions": {
typeScript 入门环境安装
weixin_47218793的博客
09-09 1455
typeScript 入门环境安装
vite vue ts electron element-plus vuex 构建项目
05-19
首先，你需要安装 Node.js 和 npm。然后，可以按照以下步骤构建你的项目： 1. 创建项目文件夹并进入该文件夹： ``` mkdir my-project cd my-project ``` 2. 初始化项目： ``` npm init -y ``` 3. 安装 Vite： ``` npm install vite --save-dev ``` 4. 安装 Vue.js： ``` npm install vue@next --save ``` 5. 安装 TypeScript： ``` npm install typescript --save-dev ``` 6. 安装 Electron： ``` npm install electron --save-dev ``` 7. 安装 Element Plus： ``` npm install element-plus --save ``` 8. 安装 Vuex： ``` npm install vuex --save ``` 9. 创建 TypeScript 配置文件： ``` npx tsc --init ``` 10. 创建主进程和渲染进程的 Electron 入口文件： ``` // 主进程入口文件 main.js const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` ``` // 渲染进程入口文件 src/renderer/main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(App).use(router).use(store).use(ElementPlus).mount('#app') ``` 11. 创建 Vue 组件，例如 App.vue： ``` <template> <div id="app"> <router-view /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'App' }) </script> ``` 12. 创建 Vuex store，例如 store/index.ts： ``` import { createStore } from 'vuex' export default createStore({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) ``` 13. 创建路由器，例如 router/index.ts： ``` import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router ``` 14. 创建主页面组件，例如 views/Home.vue： ``` <template> <div> <h1>{{ message }}</h1> <button @click="increment">Increment</button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { useStore } from 'vuex' export default defineComponent({ name: 'Home', setup () { const store = useStore() return { message: 'Hello, World!', increment () { store.commit('increment') } } } }) </script> ``` 15. 运行项目： ``` npm run dev ``` 以上就是使用 Vite、Vue.js、TypeScript、Electron、Element Plus 和 Vuex 构建项目的基本步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值