前言

前几天手写了一个vite插件，并且发布到了npm上，有需要的伙伴可以下载安装哦，在我上一遍文章有介绍，欢迎查看

现在我来介绍一下不用脚手架从零搭建一个很规范的项目，项目中包括有eslint、prettier、babel、ts等规范自己的代码

准备阶段

环境

保证电脑有安装Node，
最好也全局安装一下yarn工具

创建项目并初始化

创建一个目录，然后进入这个目录终端，执行命令npm init

npm init

配置 Eslint

先安装 eslint，执行命令npm i eslint -D

然后在通过eslint配置项目执行命令npx eslint --init 或者 npm init @eslint/config 都是通过eslint去配置项目的，执行命令后会让我们选择一些配置：

选择 To check syntax, find problems, and enforce code style

根据自己需要是否需要使用ts 我这里使用ts

我这里使用yarn 使用npm也一样哈

下载后项目根目录会有一个eslintrc.js文件

配置Babel（可选）

我们在开发过程中通过是使用ES6+，到时有的环境不支持，所以需要将ES6+语法代码转换成环境可以兼容的ES5代码，所以需要通过 babel 进行转换。首先安装 babel依赖

yarn add @babel/cli @babel/core @babel/preset-env -D

然后在根目录中创建一个名为“.babelrc”的文件来配置Babel。将下面显示的代码添加到新创建的文件中，以便为您的NPM项目成功配置Babel

{
  "presets": [
    ["@babel/env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

安装 prettier 格化式代码（可选）

yarn add prettier -D

然后再 VS Code 安装 prettier 插件，设置保存后自动格式化代码。
项目跟目录下新建 .prettierrc 文件

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 160,
  "singleQuote": false,
  "trailingComma": "none",
  "semi": true
}

在package.json文件添加执行脚步命令"prettier": "prettier --write .",

4. 通过执行命令:npm run prettier 可以自动格式化项目中的所有代码,就不用没个项目都保存一遍 5. 也可以屏蔽一些文件不要格式化代码,比如打包后的代码是不需要格式化的。就需要在根目录下新建一个.prettierignore 文件

配置 TS

因为我配置项目时候,配置了ts 所以要对TS代码进行配置
安装 @types/node typescript

yarn add @types/node typescript -D

根目录创建 tsconfig.json 文件，配置可以参考我的如下，具体配置可以在官网学习，TS官网

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "CommonJS",
    "moduleResolution": "node",
    "strict": false,
    "declaration": true,
    "noUnusedLocals": true,
    "esModuleInterop": true,
    "outDir": "dist",

    "lib": ["ESNext"],
    "sourceMap": true
  },
  "include": ["./src"]
}

编写代码

根目录下创建src目录，在 src 目录下新建一个 index.ts 然后编写TS代码

对代码进行打包

在package.json文件中，添加脚步命令:"build": "rimraf dist && tsc -p ."

// package.json
"scripts": {
    "build": "rimraf dist && tsc -p .",// 先移除 dist 目录然后在编译src目录下代码
  },

涉及到了 rimraf dist，所以还需要安装一下 rimraf
编译后的代码都在 dist 目录，所以入口是 dist 目录下的 index.js 文件
修改 package.json 文件的入口

  "main": "dist/index.js",

测试

链接包进行本地发布

我们不需要发布库来测试它。npm 允许我们通过命令 npm link在本地链接库来模拟这个过程
先对项目进行打包 npm run build
然后本地发布命令: npm link

本地安装

我们可以通过vue-cli或者 vite 创建一个vue项目
然后再执行: npm link <<package-name>>,就会在把本地发布的库安装到这个项目的node_modules目录下
这样本地测试代码是同步的，如果改了库的代码，在项目中会实时同步的，就不用在 npm link <<package-name>>

发布到npm官网

注册npm账号

先去 npm 官网注册一个账号，npm官网

发布

先打包npm run build
执行命令 npm login 登录 npm 账号

npm login

然后再 npm publish 发布这个项目

npm publish

然后就可以在 npm官网查看到这个包了

疑问问题

可以不需要 babel 配置

如果你的项目不是TS代码，项目中是要有 babel 转换的
如果项目是TS项目,并且在 tsconfig.json 中的compilerOptions.target 设置 ES2015 ，就可以不需要 babel 装换了，因为TS 编译的时候已经把 ES6+代码转成 ES5代码

总结

这里设计到的技巧还是挺多的, 大家动手实践一下
还是tsconfig.json的配置有很多，可以配置很多东西，具体可以去官网学习下，TS官网
以上内容如果错误或者疑问的，请及时留言提出，谢谢大家的支持

发布自己的npm包详细教学，并且通过Eslint规范选择性配置自己的项目

前言