還學得動嗎,Vue 3.0和webpack5如期而至

  • 一覺醒來,朋友圈被 vue3.0webpack5刷屏了
  • 如下是Vue3.0版本的一些介紹資料,目前中文版文檔尚未公佈連接
https://github.com/vuejs/vue-next/releases/tag/v3.0.0

Vue3.0幾個優化點

  • 進一步推動「漸進框架」概念javascript

  • 分層內部模塊html

  • 解決規模問題的新API前端

  • 性能改進提高vue

  • 改進的TypeScript集成java

  • 部分實驗特徵react

  • 分階段發佈流程linux

  • 後續:webpack

    • 遷移和IE11支持
  • 官網英文版地址:https://v3.vuejs.org/git

  • 官方示例:github

const app = Vue.createApp({
  data() {
    return {
      input: '# hello'
    }
  },
  computed: {
    compiledMarkdown() {
      return marked(this.input, { sanitize: true });
    }
  },
  methods: {
    update: _.debounce(function(e) {
      this.input = e.target.value;
    }, 300)
  }
})

app.mount('#editor')

初始化vue3.0項目分幾種模式

  • CDN引入:
<script src="https://unpkg.com/vue@next"></script>
  • vite構建:
npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3
  • vue-cli構建:
npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3
# select vue 3 preset

遷移指南:

文檔地址:https://v3.vuejs.org/guide/migration/introduction.html#ide-support

注意點

  • 目前,針對Vue 3和v3的項目的文檔網站,GitHub分支和npm dist標籤將保持next標明狀態。這意味着npm install vue仍將安裝Vue 2.x和npm install vue@nextVue3。咱們計劃在2020年末以前將全部文檔連接,分支和dist標籤切換爲默認值3.0。
  • 同時,咱們已經開始計劃2.7,這將是2.x發行版的最後一個計劃的次要發行版。2.7將向後移植來自v3的兼容改進,併發出有關v3中已刪除/更改的API使用狀況的警告,以幫助潛在的遷移。咱們計劃在2021年第一季度研究2.7,它將在發佈後直接變爲LTS,具備18個月的維護壽命。

webpack5傳聞2020年10月10日正式版本5.0版本

  • 我以前使用感覺:
    • html-webpack-plugin作了調整
    • 以前跟react-hot-loader熱更新插件有一些衝突
    • 遷移升級起來比較快
    • 目前我沒有看到正式的官方文章、文檔連接,若是大家有的話下方討論的時候留言如下讓你們看到

目前如何使用webpack5

  • 安裝
npm install —save-dev webpack@next或
npm install —save-dev webpack@v5.0.0-alpha.9

據我所知webpack5作的優化

  • 使用持久化緩存提升構建性能;
  • 使用更好的算法和默認值改進長期緩存(long-term caching);
  • 清理內部結構而不引入任何破壞性的變化;
  • 引入一些breaking changes,以便儘量長的使用v5版本。

前端人沒必要焦慮

  • 原生javascript和Node.js是你的基礎,linux和數據結構算法、TCP、操做系統這些則你的內功,掌握好這些不管框架它們怎麼升級也終究是時代的產物。框架和庫升級若是是斷崖式升級那麼這個庫在國內也確定之後會掛掉的,不存在學不動
  • 新框架升級的話建議等過段時間,等它穩定&你與公司成員都熟悉文檔後升級比較好,特別是大型項目的升級
  • 關鍵點在於,這個項目你以爲是否有升級必要


本文分享自微信公衆號 - 前端下午茶(qianduanxiawucha)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。

相關文章
相關標籤/搜索