以何種方式使用babel?（6種）

mengbo 發布于2019-08-23 18:33 / 2207人閱讀

摘要：以何種方式使用種可以配置許多其他工具也有類似的配置，。允許使用所有但是，如果該選項需要，則可能需要使用自身使用的配置文件地址以何種方式使用在項目的根目錄中創建一個文件。可以訪問任何，例如基于流程環境的動態配置使用使用

以何種方式使用babel?（6種）

【01】Babel可以配置！許多其他工具也有類似的配置：ESLint（.eslintrc），Prettier （.prettierrc）。

允許使用所有Babel API

但是，如果該選項需要JavaScript，則可能需要使用JavaScript

【02】babel自身使用的配置文件地址：https://github.com/babel/babe...

以何種方式使用babel?

01、babel.config.js

在項目的根目錄中創建一個babel.config.js文件。使用以下內容。

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

【】例子：

以下的瀏覽器列表只是一個隨意的例子。您必須根據要支持的瀏覽器進行調整。

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];

module.exports = { presets };

運行此命令將src目錄中的所有代碼編譯為lib目錄：

./node_modules/.bin/babel src --out-dir lib

02、.babelrc

在項目的根目錄中創建一個.babelrc文件。使用以下內容。

一個僅適用于簡單單個包的靜態配置。

{
  "presets": [...],
  "plugins": [...]
}

03、package.json

在package.json配置.babel屬性。

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

04、.babelrc.js

配置.babelrc與之相同，但可以使用JavaScript編寫它。

const presets = [ ... ];
const plugins = [ ... ];

module.exports = { presets, plugins };

可以訪問任何Node.js API，例如基于流程環境的動態配置：

const presets = [ ... ];
const plugins = [ ... ];

if (process.env["ENV"] === "prod") {
  plugins.push(...);
}

module.exports = { presets, plugins };

05、使用CLI（@babel/cli）

babel --plugins @babel/plugin-transform-arrow-functions script.js

06、使用API（@babel/core）

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-transform-arrow-functions"]
});

云服務器 GPU云服務器何種方式以只讀方式打開 linux 6種模式幾種方式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105422.html

webpack學習筆記1

摘要：頭部資源終將占據統治地位，成為前端項目構建工具的頭部資源。模塊化編程模塊的概念是將程序拆解為離散的功能塊，通常稱這些功能塊為模塊。模塊相對于程序而言，具有更小的體積，單個模塊具有清晰的目的，方便進行開發測試維護等工作。 webpack作用 webpack可以將前端工程中所有的靜態資源打包成為一個或者多個js，靜態資源包括css、圖片等。為什么要使用webpack，沒有打包工具之前，頁...

legendaryedu 2019-08-23 13:46 評論0 收藏0
從 JavaScript 到 TypeScript - 模塊化和構建

摘要：不過，相對于靜態類型檢查帶來的好處，這些代價是值得的。當然少不了的模塊化標準，雖然到目前為止和大部分瀏覽器都還不支持它。本身支持兩種模塊化方式，一種是對的模塊的微小擴展，另一種是在發布之前本身模仿的命名空間。有一種情況例外。 TypeScript 帶來的最大好處就是靜態類型檢查，所以在從 JavaScript 轉向 TypeScript 之前，一定要認識到添加類型定義會帶來額外的工作量...

Jonathan Shieber 2019-08-20 15:38 評論0 收藏0
寫了十年JS卻不知道模塊化為何物？

摘要：于是模塊化的需求也就產生了。現存的規范還真不少，不知道能否終結這場混戰和分別是和定義的標準。是使用的模塊化標準。的模塊化聲明的方式與類似，只是更進一步，天然隔離了命名空間。其他，關于前端化趨勢模塊化意味著什么更強大的前端，技術整體前移。作者：肖光宇野狗科技聯合創始人，先后在貓撲、百度、搜狗任職，愛折騰的前端工程師。野狗官博：https://blog.wilddog.com/ 野狗官網...

LittleLiByte 2019-08-21 10:46 評論0 收藏0
Vue+webpack+Element 兼容問題總結

摘要：項目中用到了和官方文檔中給出明確范圍不支持及以下版本，因為使用了無法模擬的特性。但它支持所有兼容的瀏覽器。詞法分析階段把字符串形式的代碼轉換為令牌流。語法分析階段會把一個令牌流轉換成的形式方便后續操作。利用我們配置好的把生成的轉變為新的。項目中用到了Vue.js和Elenment-UIVue官方文檔中給出明確范圍：Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法...

fxp 2019-08-26 12:10 評論0 收藏0
Vue+webpack+Element 兼容問題總結

摘要：項目中用到了和官方文檔中給出明確范圍不支持及以下版本，因為使用了無法模擬的特性。但它支持所有兼容的瀏覽器。詞法分析階段把字符串形式的代碼轉換為令牌流。語法分析階段會把一個令牌流轉換成的形式方便后續操作。利用我們配置好的把生成的轉變為新的。項目中用到了Vue.js和Elenment-UIVue官方文檔中給出明確范圍：Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法...

sumory 2019-08-02 11:14 評論0 收藏0