rollup打包报错“semantic error TS2802”

rollup版本:2.79.1;nodejs:16.16.0;typescript:5.1.6

错误信息

Error: D:/**/*.ts(158,32): semantic error TS2802: Type 'StyleSheetList' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

修改tsconfig.json配置,增加"lib": ["es2015"]配置

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ],
  "compilerOptions": {
    "downlevelIteration": true,
    "lib": ["es2015"],
  }
}

源代码可参考:vue3-print-ts (gitee.com)

<think>好的,用户想了解如何从零开始搭建一个定制的前端脚手架项目,包含工程化相关内容。首先需要明确用户的需求,他们可能是一个前端开发者,希望提升项目的标准化和自动化流程,减少重复配置工作。可能需要覆盖Git Hooks、代码规范、CI/CD等方面。 首先,用户提到的Git的husky,这属于Git钩子管理,用来在提交时运行lint或测试。需要解释如何配置husky,并结合lint-staged来优化提交前的检查流程。 然后是ESLint和格式化,这部分需要选择合适的规则集,比如Airbnb或Standard,同时配置Prettier来处理代码风格,确保团队成员代码一致。还要考虑与编辑器的集成,比如VSCode的自动格式化设置。 CI/CD部分,用户可能希望了解如何通过GitHub Actions或GitLab CI自动化部署流程,包括测试、构建和发布到服务器或npm仓库。需要说明不同环境的配置,比如开发、测试和生产环境的分支管理。 框架选择方面,用户可能对React、Vue或Svelte等主流框架的集成感兴趣,需要指导如何根据项目需求选择合适的框架,并配置相应的构建工具,比如Vite或Webpack。 另外,用户可能还关心模块化、组件化、构建优化等工程化实践。需要提到如何配置Babel、TypeScript、环境变量管理等。可能还需要介绍如何集成测试工具如Jest或Cypress。 最后,可能需要提供一个简单的脚手架示例,引导用户逐步实践,确保他们能够理解每个步骤的作用,并能够根据自身需求进行调整。需要提醒用户注意版本兼容性和团队规范统一的重要性,避免配置冲突。</think>以下是从零搭建定制化前端脚手架项目的完整工程化指南,分步骤说明关键配置点: --- ### 一、基础框架选择 1. **构建工具推荐**: ```bash # 使用 Vite 快速初始化项目(以React为例) npm create vite@latest my-project -- --template react-ts ``` - 备选方案:Webpack(配置复杂但灵活)、Rollup(库项目推荐) 2. **框架选型原则**: - 业务复杂度高 → React/Vue + 状态管理方案 - 轻量级应用 → Preact/Svelte - 多端统一 → Taro/Uni-app --- ### 二、Git 规范配置 1. **Husky + Commitlint 配置**: ```bash # 安装依赖 npm install husky lint-staged @commitlint/cli @commitlint/config-conventional -D # 初始化 husky npx husky install npx husky add .husky/pre-commit "npx lint-staged" npx husky add .husky/commit-msg 'npx commitlint --edit "$1"' ``` 2. **commitlint.config.js**: ```javascript module.exports = { extends: ['@commitlint/config-conventional'], rules: { 'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore']] } } ``` 3. **lint-staged 配置(package.json)**: ```json { "lint-staged": { "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"], "*.{md,json}": ["prettier --write"] } } ``` --- ### 三、代码规范体系 1. **ESLint 配置(.eslintrc.js)**: ```javascript module.exports = { root: true, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'prettier' ], plugins: ['@typescript-eslint', 'import'], rules: { 'import/order': ['error', { 'groups': ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'], 'newlines-between': 'always' }] } } ``` 2. **Prettier 配置(.prettierrc)**: ```json { "printWidth": 100, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "all", "bracketSpacing": true, "arrowParens": "always" } ``` 3. **编辑器集成(.vscode/settings.json)**: ```json { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" } ``` --- ### 四、CI/CD 配置(以GitHub Actions为例) 1. **.github/workflows/deploy.yml**: ```yaml name: CI/CD Pipeline on: push: branches: [ main ] pull_request: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Setup Node uses: actions/setup-node@v3 with: node-version: 18.x cache: 'npm' - name: Install Dependencies run: npm ci - name: Lint Check run: npm run lint - name: Build Project run: npm run build - name: Deploy to Server uses: appleboy/ssh-action@v0.1.10 with: host: ${{ secrets.SSH_HOST }} username: ${{ secrets.SSH_USER }} key: ${{ secrets.SSH_KEY }} script: | cd /var/www/my-project git pull origin main npm ci --production pm2 restart ecosystem.config.js ``` --- ### 五、进阶工程化配置 1. **模块化配置**: ```javascript // vite.config.js export default defineConfig({ build: { rollupOptions: { output: { manualChunks(id) { if (id.includes('node_modules')) { return 'vendor' } } } } } }) ``` 2. **环境变量管理**: ```bash # .env.development VITE_API_BASE=http://localhost:3000/api # .env.production VITE_API_BASE=https://api.example.com ``` 3. **性能优化方案**: - 代码分割(Dynamic Import) - 图片压缩(vite-plugin-imagemin) - Gzip压缩(vite-plugin-compression) --- ### 六、推荐工具链组合 | 功能 | 推荐方案 | 替代方案 | |---------------|----------------------------|-----------------------| | 包管理 | pnpm + changeset | yarn + lerna | | 测试框架 | Vitest + Testing Library | Jest + Cypress | | 监控 | Sentry | Bugsnag | | 文档系统 | Storybook + MDX | Docusaurus | | 部署平台 | Vercel | Netlify / AWS Amplify| --- ### 七、脚手架维护建议 1. 版本管理策略:Semantic Versioning 2. 使用CHANGELOG.md记录变更 3. 创建项目模板仓库(Git Template Repository) 4. 开发配套CLI工具(使用commander.js) 通过以上配置,可实现标准化前端工程体系,建议根据团队规模选择适当配置级别。小型项目可简化CI/CD流程,大型团队建议增加SonarQube代码质量检测、Jira集成等企业级功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值