2. 程式人生 > >03利用babel來”編譯”我們的指令碼檔案

03利用babel來”編譯”我們的指令碼檔案

阿新 • • 發佈：2019-01-09

第一步
在終端下進入專案根目錄，執行 npm init，一路回車下去
然後發現專案目錄下多了一個”package.json”檔案

第二步
安裝babel-cli

sudo npm install -g babel-cli

安裝”編譯”外掛

sudo npm install babel-plugin-transform-react-jsx

完成上面，專案目錄下會多如下目錄和檔案
這裡寫圖片描述

第三步、執行編譯
編譯我們src目錄下面的hello.js

babel --plugins transform-react-jsx src/hello.js --out-file build/hello.js

編譯後的檔案輸出到build/hello.js

第四步、修改index.html

<!DOCTYPE html>
<html>
<head>
    <title>初始</title>
    <meta charset="utf-8">
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>

    <!-- 不需要這個檔案啦 -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> -->
 


</head>
<body>
    <div id="demo"></div>

    <!-- 必須放在dom後面 -->
    <!-- 注意type是text/javascript啦 -->    
    <!-- 引入我們編譯好的js -->
    <script type="text/javascript" src="build/hello.js"></script>
</body>
</html>

相關推薦

03利用babel來”編譯”我們的指令碼檔案

第一步 在終端下進入專案根目錄，執行 npm init，一路回車下去 然後發現專案目錄下多了一個”package.json”檔案 第二步 安裝babel-cli sudo npm install -g babel-cli 安裝”編譯”外掛

Java客戶端利用httpclient來同時上傳檔案和其他字串引數

1.客戶端程式碼如下： import java.io.File; import java.io.IOException; import java.io.UnsupportedEncodingException; import java.nio.charse

使用webpack+babel來"編譯"你的JS程式碼(下)

上節課我們學習了 1.安裝了babel的es2015轉換器 編寫了一個簡單的es2015語法的js程式碼 let name = “zhangsan”; 2.執行了 babel index.js –out-file xxx.js 把程式碼進行轉化 3.安

利用Oracle DBMS_SCHEDULER呼叫shell指令碼檔案

今天在itpub上看到個帖子，大意是使用shell指令碼取檔案列表，和資料庫中一個表中記錄的檔名相比較，沒有的插入到表裡去。實驗程式碼如下：#建立檔案filelist.sh如下： #!/bin/bash

用PowerShell來執行 互動式指令碼檔案

你是不是為老是在命令提示符中敲打命令而煩惱？當然按照MS的標準，您無需為每次執行的一長串命令而重新敲打鍵盤。舉個列子，如下我們將計算今天到2008-8-8（北京奧運會）那天還有多少天。。。 Function Anders{([datetime]"2008-8-8"- [d

AS離線開發和如何離線狀態下利用gradle來編譯android工程

首先，網上大部分的開發資料都是教我們如何去在android studio上怎麼離線開發。這個我也總結下流程。 1.點到preferences->build tools->gradle 下有

利用sharedPreference來儲存我們的登入資訊

今天大週六的，還要在家辦公繼續寫我們的app。 隨便抱怨兩句，為廣大的程式設計師無病呻吟兩下。 那麼開始今天的正片環節吧，沒什麼技術含量，本人也是一隻小菜雞，慢慢進步嘛。 對sharedPreference下面都用簡稱sp了。 我們利用sp來對app的登入資訊進行儲存，然後

如何在QML中利用Sprite來做我們需要的動畫

import QtQuick 2.0 import QtMultimedia 5.0 Item { width: 64 height: 64 property real hp: 3 SoundEffect { id: spawnSound s

如何在phpstrom上利用babel實現自動編譯es6檔案

win10系統，babel折騰了一天才安裝成功，找了網上很多資料，感覺有些亂，所以自己把網上的資料和自己踩的坑整理了一下，僅供大家參考： 1.新建一個專案 1.建立一個新資料夾作為根目錄，如：babeltest 2.在根目錄下新建一個js檔案測試用，如：test.js 3.

自從我學會利用Python來傳檔案！就在也不用某網盤的臉色傳了！

  如果你看過我最近的兩篇文章，你一定就會猜到接下來會發生什麼了，但凡碰到什麼棘手的問題，就是我號稱「簡潔優雅，省心省力」的 Python 閃亮登場的時候了，知道這是什麼麼？這就是傳說中的主角光環，所以啊，學習 Python 刻不容緩。 Python 中內建了一個「下載伺服器

SecureCRT利用SFTP來實現檔案的上傳

SecureCRT 是一款支援 SSH 協議的終端模擬程式，支援在 Windows 下登入 UNIX 或者 LInux 伺服器主機的軟體，是一款用於連線執行 Windows、UNIX 和 VMS 的理想工具。 SecureCRT可在 360 軟體管家裡搜尋下載安裝，安裝完成後需要破解，網上教

一個小坑： -bash: ./backup.sh: /bin/bash^M: bad interpreter: No such file or directory 由於shell指令碼檔案被我在Windows下編輯過，出現上面錯誤的原因之一是指令碼檔案是DOS格式的, 即每一行的行尾以\r\n來標識

    由於shell指令碼檔案被我在Windows下編輯過，出現上面錯誤的原因之一是指令碼檔案是DOS格式的, 即每一行的行尾以\r\n來標識, 使用vim編輯器開啟指令碼, 執行::set ff? 可以看到DOS或UNIX的字樣. 使用se

用shell實現一個小指令碼，用來同來統計自己某個檔案下的程式碼，總的程式碼行數，總的註釋量，總的空行量？支援遍歷查詢，支援軟連結查詢

[[email protected] yunwei]# cat sum_code_row_version1.4.sh #!/bin/bash # File Name: sum_code_row.sh # Author: Liwqiang # mail: [email

通過Build.xml 的配置來 執行 Run As 達到 copy 已經通過tomcat 編譯好的檔案 生成出來 然後可以通過svn，git 等上傳到伺服器上執行

<?xml version="1.0" encoding="UTF-8"?> <project name="ant-project" default="run" basedir="..

如何在客戶端上傳shell指令碼檔案，並利用PHP呼叫執行指令碼

題目中的上傳包含兩部分，一部分是上傳檔案，一部分是利用PHP執行指令碼 上傳檔案到指定資料夾 所謂檔案上傳是指將本地文字檔案，圖片視訊或者音訊等檔案上傳到伺服器上，以供後續操作的過程。 上傳檔案有幾種方式，包括： - 單純的form表單上傳提交 使

編寫shell指令碼檔案來批量執行labelme_json_to_dataset

總結： 主要有三個點要把握好： 1.shell的語法（這個網上資料很多） 2.labelme轉化時候要啟用自己安裝labelme的anaconda環境，要不然就找不到labelme_json_to_dataset 3.出現Bad for loop variable不是

利用檔案頭來實現的一些檔案型別的方法封裝

package com.opslab.util.algorithmImpl; import java.io.File;import java.io.FileInputStream;import java.io.IOException;import java.io.InputStream;import jav

利用HTML來播放音訊檔案

用<embed>標記。 其主要有如下的屬性： src：指定要載入的多媒體檔案 autostart:設定是否自動播放 loop:設定播放的次數 播放背景音樂：用<bgsound>屬性 由於是背景音樂，應該選用.mid 的音樂，可以佔用較小

Linux中利用logrotate來對log檔案進行轉儲

使用logrotate對日誌檔案轉儲，按時或者按大小。 logrotate簡介 NAME logrotate - rotates, compresses, and mails system logs SYNOPSIS

利用反射機制來驗證上傳檔案的格式是否符合要求

public boolean validateFileType(String propertyName) throws Exception{  PropertyDescriptor[] propertydesc = Introspector.getBeanInfo(this.