es6轉碼和package.json中的配置

来源:https://www.cnblogs.com/ygjzs/archive/2020/01/23/12230841.html

線上實時轉換 需要 .babelrc中: 項目中main.js配置: 前提是安裝對應的包 自己寫的要運行的為app.js,這樣配置後會在運行main.js是自動轉為es5並執行 通過配置手動轉換 需要 安裝babel後 運行 src為自己寫的es6目錄文件,dist為轉碼後的es5文件,沒有則創建 ...


線上實時轉換

需要babel-register
.babelrc中:

{
  "presets": [
    "es2015"
  ]
}

項目中main.js配置:

前提是安裝對應的包

require('babel-register')
require('./src/app')

自己寫的要運行的為app.js,這樣配置後會在運行main.js是自動轉為es5並執行

通過配置手動轉換

需要babel-cli

安裝babel後

運行babel src -d dist
src為自己寫的es6目錄文件,dist為轉碼後的es5文件,沒有則創建
運行node dist/app.js
這樣就可以以es5來運行自己的項目了

關於package.json中的配置

package.json:

{
  "name": "edu",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node main.js",
    "build": "babel src -d dist",
    "prestart": "npm run build",
    "start": "node dist/app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "echarts": "^3.4.0",
    "ejs": "^2.5.5",
    "express": "^4.14.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.1.1",
    "nprogress": "^0.2.0"
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-register": "^6.22.0"
  }
}

dependencies為項目依賴文件,上線必須要安裝的

devDependencies為開發階段使用的工具,只在開發階段使用

對配置的解釋

"dev": "node main.js",
運行node run dev=node main.js

"build": "babel src -d dist",
運行npm run build=babel src -d dist

    "prestart": "npm run build",
    "start": "node dist/app.js"

運行npm startnpm run start=npm run build+node dist/app.js


您的分享是我們最大的動力!

更多相關文章
  • 聚集函數 我們經常需要彙總數據而不用把它們實際檢索出來,為此MySQL提 供了專門的函數。使用這些函數,MySQL查詢可用於檢索數據,以便分 析和報表生成。這種類型的檢索例子有以下幾種。 確定表中行數(或者滿足某個條件或包含某個特定值的行數)。 獲得表中行組的和。 找出表列(或所有行或某些特定的行) ...
  • Ream--(objc)寫事務精簡方案 地址: REALM-- Realm官方提供的的寫事務有兩種方式: A[realm beginWriteTransaction]; // ... [realm commitWriteTransaction]; B [realm transactionWithBl ...
  • 這幾天用自己目前掌握的安卓開發知識製作了一個記事本小程式,在這裡分享一下開發流程,希望可以幫到和我一樣的初學者。 開發工具為Android studio,後臺語言為java,使用的資料庫為安卓的SQLite資料庫,功能及效果圖如下: 主界面,長按可刪除: 點擊加號添加: 主頁面點擊查看,此頁面含修改 ...
  • 如果你剛剛說開心,說雞凍,說嘚瑟,那你完了,你高興得太早了,畢竟小程式佈局的技術,Flex都還沒開始學,等學會再嘚瑟吧。 Flex是Flexible Box的縮寫,意為”彈性佈局”,可以支持從左到右,從上到下...... ...
  • 載入靜態資源 複習以前學的express express怎麼用? 如何獲取請求? 如何處理響應? 如何對向外暴露靜態資源? express核心:中間件:如何理解? 中間件:用來處理 http 請求的一個具體的環節(可能要執行某個具體的處理函數) 中間件一般都是通過修改 req 或者 res 對象來為 ...
  • 對babel進行複習
  • 不做解釋,代碼一看就懂 app.js config.js ...
  • 假如有兩個文件:app.js和config.js app.js為主文件要去引用config這個模塊 以前學習node時使用的模塊導出: es6中的模塊導出 方法一 兩種可以混合使用 方法二 通過 export 導出的成員必須通過解構賦值按需載入 或者通過 的形式載入所有通過 export 關鍵字導出 ...
一周排行
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7966240.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第五個模式--中介者模式,先從名字上來看。中介者模式可以理解為在兩個或多個對象中間增加一個“中間對象”,由增加 的“ ...
  • 抗疫時期,想到弄個微信程式用於社區出入和復工復產人員流動登記,老早就買的盛派的書和視頻,一直沒時間看,趁這個需求,下載盛派weixinDSK開始學習,先是打開盛派的網站陸續無法打開, 幫助文檔也沒能搶救性下載,估計是盛派在遷移啥東西。項目生成工具也不能用了 試著把GitHub上下載的sample部署 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/8032683.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第六個模式--狀態模式。無論是現實世界,還是面向對象的OO世界,裡面都有一個東西,那就是對象。有對象當然就有 狀態了 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/8057654.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第七個模式--策略模式。在現實生活中,策略模式的例子也非常常見,例如:在一個公司中,會有各種工作人員:有普 通員工、 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/8109100.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第八個模式--職責鏈模式。讓我們看看現實生活中某公司採購流程的例子吧,理解起來可能更容易。某公司的規章制度 規定,採 ...
  • 通過前面的文章的學習,我們已經有實現了使用ABP提供的WebAPI方式+EasyUI來實現增刪改查的功能。之前我們把一些基本的信息已經完成了,如貨物信息,供應商信息。有了前面的基礎信息,我們可以實現入庫管理功能。從本章開始我們來學習一個入庫單功能,這個將會涉及DataGrid的主從功能。 一... ...
  • 一談到如何在.Net中進行對象映射,可能大部分同學都會脫口而出:“使用AutoMapper!”。 是的,AutoMapper 是一個非常成熟的對象映射器。截至到寫這篇文章,您能在Nuget上下載到的AutoMapper包的版本為:v9.0.0,而對應的 Github 的 star 已經高達7K。然後... ...
  • WPF提供了可應用於任何元素的可視化效果。效果的目標是提供一種簡單的聲明式方法,從而改進文本、圖像、按鈕以及其他控制項的外觀。不是編寫自己的繪圖代碼,而是使用某個繼承自Effect的類(位於System.Windows.Media.Effects名稱空間中)以立即獲得諸如模糊、輝光以及陰影等效果。 下 ...
  • 前言 這兩天面試了一個物聯網公司高級研發,面試題是下麵這樣子 公司領導,部門主管,小組組長,組成員4級,假如有個 疫情預警,先通知組人員(對個人,主要有一個處理就算處理了) 如果3分鐘沒處理,就往組長髮簡訊,如果組長3分鐘沒處理就往上級推送。一級一級的。 要求單程式併發至少支持1000tps預警事件 ...
  • 在家辦公,下班繼續看點東西,不廢話,繼續看MVC的路由。 asp.net核心mvc的路由是建立在asp.net核心的路由之上的。通過終結點載入路由中間件的配置方式在此不細說了,(DOTNET Core MVC(二)已經說明)。在看一下其他的載入方式: app.UseMvc(routes => { / ...
x