成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react項目配置babel7

XGBCCC / 1101人閱讀

摘要:項目配置不多說,先上配置總結(jié)的包都是以開頭的,所有的模塊插件啥的都是在目錄下中真正干活的是插件,插件的作用是預(yù)置,就是一個插件包的集合,你也可以自己寫插件包插件包不夠用,再配置唄配置了肯定要用新版本的老版本的會找而不是會

babel7 React項目配置 不多說,先上babelrc配置
{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "chrome": "66"
        },
        "corejs": {
          "version": 2
        },
        "useBuiltIns": "usage",
        "modules": "commonjs"
      }
    ],
    "@babel/react"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-proposal-class-properties", {"loose": true}],
    "add-module-exports",
    ["import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}
總結(jié)

babel7的包都是以 @babel開頭的,所有的模塊插件啥的都是在node_modules/@babel/目錄下

babel中真正干活的是插件,插件的作用是transform

preset(預(yù)置),就是一個插件包的集合,你也可以自己寫插件包,插件包不夠用,再配置plugins唄

配置了babel7,肯定要用新版本的babel-loader,老版本的babel-loader會找 babel-core而不是@babel/core會報錯

babel7新增了babel.config.js配置文件,是項目級別的配置,建議使用, .babelrc配置仍然可以用,至于為啥,memorepo可以了解一下

babel7廢棄了babel-preset-stage-0這樣的配置,如果不懂stage-0啥的,自行學(xué)習(xí),如果要用,需要直接引入cores-js的相關(guān)模塊

@babel-preset-env 這樣的preset可簡寫,如上

polyfill墊片,就是web開發(fā)中,可移植的代碼補充庫

關(guān)于babel-polyfill其實就是core-js 和 一個工具庫

core-js是實現(xiàn)了一些現(xiàn)在沒支持的新功能的庫,分2和3兩個大版本

babel6之后,對export default 這樣的 es 模塊寫法不支持,需要一個 babel-plugin-add-module-exports的庫支持

要支持裝飾器的寫法,需要@babel/plugin-proposal-decorators 插件支持,配置如上

babel-plugin-import 是配置antd按需加載的一個插件,做React項目,幾乎antd是必備的吧

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/106164.html

相關(guān)文章

  • 如何搭建一個基于react、webpack4、babel7項目(一)

    摘要:對的工作流程有點模糊,以及據(jù)官方文檔稱的升級,性能得到了極大的提升,而還是用的,于是決定從頭開始搭建一個適合團隊的腳手架。保證各文件獲得一致的文件編碼和縮進(jìn)效果。這些在后面文章中,都會一個個涉及到,此處不做詳細(xì)展開。 前言 寫前端項目這么久了,以前用的 dva 框架,后來用過 create-react-app 框架,都需要針對團隊做一些定制化的修改。對 webpack 的工作流程有點模...

    IamDLY 評論0 收藏0
  • 手動創(chuàng)建基于webpack+babel的react應(yīng)用(babel7)

    摘要:搭建一個項目環(huán)境首先生成文件至此我們就可以安裝的相關(guān)依賴了。下的依賴核心部分,把轉(zhuǎn)化成外部引用輔助函數(shù)和內(nèi)置函數(shù),自動填充代碼而不會污染全局變量。入口文件我在中配的,所以在下新建文件,添加我們的第一個組件。 搭建一個React項目環(huán)境 首先npm init生成package.json文件.至此我們就可以安裝react的相關(guān)依賴了。 npm install react --save np...

    alaege 評論0 收藏0
  • 基于webpack4.x, babel7.x 搭建的多頁面腳手架, 簡化前端開發(fā)環(huán)境配置,開箱即用,

    摘要:開箱即用的多頁面腳手架基于模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站感興趣的朋友,請點個及時關(guān)注項目更新請點個項目請?zhí)崽匦灾С智昂蠖朔蛛x開發(fā)配置完整的打包方案支持本地開發(fā)熱更新集成代碼風(fēng)格校驗支持編寫源碼,編譯生成生產(chǎn)代碼內(nèi)置開發(fā)環(huán)境,自動加樣式前綴自 Webpack-seed 開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站(Without Vu...

    junfeng777 評論0 收藏0
  • 使用babel7構(gòu)建完美的純ts開發(fā)環(huán)境

    摘要:更新前言由于最近在重寫個人的原生插件項目遇到了集成單測的需求單純地使用會出現(xiàn)難以估計的錯誤所以決定使用完美摒棄了傳統(tǒng)的方案對于主要流程記錄下項目地址同時也歡迎新手和想提升的你參與到項目中來詳情可閱讀一基本配置先通過簡單的配置讓 更新 [2019-5-9] Added Initial release 0、前言 由于最近在重寫個人的原生ts插件項目, 遇到了集成jest單測的需求, 單純地...

    Freeman 評論0 收藏0

發(fā)表評論

0條評論

XGBCCC

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<