夏天夏 夏天夏
首页
  • 技术分享

    • 小白都能看懂的闭包
    • 关于后台管理应用
    • 关于技术的取舍
    • 前端工程化
    • 切换node版本
    • 如何优雅的写事件代理
    • 我所不了解的技术
    • 我喜欢的parcel
    • angular1使用
    • npm script打造前端工作流
  • 发布一个node插件

    • 发布一个npm包
    • 如何打包一个插件工具库
    • 打包工具的选择
  • 年终总结

    • 2019年总结
    • 2020年总结
    • 2021年总结
  • JavaScript
  • CSS
  • 框架
  • Node
  • 服务
  • web3
  • 其他
我的作品
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夏天夏

我也不饶岁月
首页
  • 技术分享

    • 小白都能看懂的闭包
    • 关于后台管理应用
    • 关于技术的取舍
    • 前端工程化
    • 切换node版本
    • 如何优雅的写事件代理
    • 我所不了解的技术
    • 我喜欢的parcel
    • angular1使用
    • npm script打造前端工作流
  • 发布一个node插件

    • 发布一个npm包
    • 如何打包一个插件工具库
    • 打包工具的选择
  • 年终总结

    • 2019年总结
    • 2020年总结
    • 2021年总结
  • JavaScript
  • CSS
  • 框架
  • Node
  • 服务
  • web3
  • 其他
我的作品
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 技术分享

    • 小白都能看懂的闭包
    • 关于后台管理应用
    • 关于技术的取舍
    • 前端工程化
      • 模块化
      • 自动化
    • 切换node版本
    • 如何优雅的写事件代理
    • 我所不了解的技术
    • 我喜欢的parcel
    • angular1使用
    • 使用npm script打造前端工作流
    • 发布一个npm包
    • 如何打包一个插件工具库
    • 打包工具的选择
  • 年终总结

  • 个人博客
  • 技术分享
夏天夏
2022-05-15
目录

前端工程化

# 我对前端工程化的理解(未写完)

最近在日常工作中我发现很多重复性的操作可以用工具或者写个脚本来搞定,比如以前构建一个项目是靠手动创建的,现在我们可以通过vue create hello-world创建一个vue项目 npm init -y 初始化一个包管理文件 parcel index.html 打包项目与浏览器热更新,使用ESlint校验js文件是否规范,使用Karma测试代码等等,如果把工作流程中使用的这些工具规范一下就很符合我们的前端工程化了。

# 模块化

前端模块化的好处是为多人合作提供了便利,早期的模块化是使用了CommonJS、AMD和CMD或者框架自带的模块机制来实现,现在ES6已经在语言层面上规定了模块系统,完全可以取代这些第三方模块化的包。

# 自动化

由于前端的自动化的概念比较新,本人对自动化的理解并不深,只能粗略讲下个人理解和我用过的。

  1. 本地机器上写代码
  2. 提交代码,push 到 git 远程仓库
  3. git hook 触发 持续集成工具自动构建项目(自动化构建)
  4. 持续集成工具中拉取项目代码,运行 npm run unit 和 npm run build,如果失败,发送邮件通知相关人。(自动化测试)
  5. 持续集成工具 中执行测试服务器的部署脚本 (自动化部署)

持续集成:使用 自动化构建:使用webpack,parcel,gulp 自动化测试:使用Karma + Mocha + Chai 自动化部署:shell脚本,node的script脚本,ci工具

编辑 (opens new window)
#前端
上次更新: 2022/05/30, 17:29:17
关于技术的取舍
切换node版本

← 关于技术的取舍 切换node版本→

最近更新
01
远程办公的个人思考
02-21
02
SEO
01-02
03
NFT的价值
12-27
更多文章>
Theme by Vdoing | Copyright © 2019-2025 夏天夏 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式