成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

ES6-開(kāi)發(fā)環(huán)境搭建（1）

android_c / 2893人閱讀

摘要：全局安裝本地安裝轉(zhuǎn)碼規(guī)則安裝完成后，我們可以看一下我們的文件，已經(jīng)多了選項(xiàng)。直接在線編譯提供一個(gè)在線編譯器，可以在線將代碼轉(zhuǎn)為代碼。

古語(yǔ)有云：“君子生非異也，善假于物；工欲善其事，必先利其器?！?/p> 

    由于有些低版本的瀏覽器還是不支持ES6語(yǔ)法，學(xué)習(xí)ES6，首先要學(xué)會(huì)搭建一個(gè)基本的ES6開(kāi)發(fā)環(huán)境，利用工具，把ES6的語(yǔ)法轉(zhuǎn)變成ES5的語(yǔ)法。

1、使用Babel把ES6編譯成ES5

1.1 建立工程目錄

先建立一個(gè)項(xiàng)目的工程目錄，并在目錄下邊建立兩個(gè)文件夾：dist 和 src

1.2 初始化項(xiàng)目

在安裝Babel之前，需使用npm init先初始化我們的項(xiàng)目。通過(guò)cmd打開(kāi)命令行工具，進(jìn)入項(xiàng)目目錄，輸入下邊的命令：

npm init -y

命令執(zhí)行完成后，會(huì)在項(xiàng)目根目錄下生產(chǎn)package.json文件。

1.3 全局安裝Babel-cli

npm install -g babel-cli

1.4 本地安裝轉(zhuǎn)碼規(guī)則

npm install --save-dev babel-preset-es2015 babel-cli

安裝完成后，我們可以看一下我們的package.json文件，已經(jīng)多了devDependencies選項(xiàng)。

1.5 新建.babelrc

在根目錄下新建.babelrc文件，.babelrc是Babel的配置文件。

該文件是用來(lái)設(shè)置轉(zhuǎn)碼規(guī)則和插件的，基本格式如下：

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

1.6 babel基本用法

# 轉(zhuǎn)碼結(jié)果輸出到標(biāo)準(zhǔn)輸出
$ babel example.js

# 轉(zhuǎn)碼結(jié)果寫(xiě)入一個(gè)文件 (--out-file 或 -o 參數(shù)指定輸出文件)
$ babel example.js --out-file compiled.js
或者
$ babel example.js -o compiled.js

# 整個(gè)目錄轉(zhuǎn)碼 (--out-dir 或 -d 參數(shù)指定輸出目錄)
$ babel src --out-dir lib
或者
$ babel src -d lib

# -s 參數(shù)生成source map文件
$ babel src -d lib -s

在src目錄下，新建index.js文件，使用ES6中的 let聲明和字符串模板

let name = "Bread and Dream";
let greeting = `hello ${name}`;

在命令行輸入

babel src/index.js -o dist/index.js

這時(shí)dist目錄會(huì)生成 index.js 文件，輸出結(jié)果為：

"use strict";

var name = "Bread and Dream";
var greeting = "hello " + name;

項(xiàng)目文件最終結(jié)構(gòu)

1.7 簡(jiǎn)化轉(zhuǎn)化命令：

使用babel命令行，一大長(zhǎng)串，很容易忘記，所以，我們可以進(jìn)行改造，打開(kāi)package.json文件，添加以下代碼

{
  "scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
}

修改好后，以后我們就可以在命令行輸入 npm run build 進(jìn)行轉(zhuǎn)換了。

（注：build是自定義的，為了語(yǔ)義化命名為build，當(dāng)然也可以命名成其他的，例如 compile）

2、webpack + Babel 構(gòu)建 ES6 開(kāi)發(fā)平臺(tái)

2.1 搭建 webpack 基本文件目錄

首先全局安裝webpack（這里使用 webpack@3.12.0 版本）

npm install -g webpack@3

新建一個(gè)文件夾，命名為 webpack_demo；

命令行切換到 webpack_demo的文件目錄下，執(zhí)行下面的命令， 生成默認(rèn) package.json 配置文件

npm init -y

利用 npm 安裝 webpack

npm i --save-dev webpack@3

新建 webpack.config.js（用于配置 webpack 的運(yùn)行方式），最簡(jiǎn)單的配置如下：

module.exports= {

/* webpack 入口起點(diǎn) */
entry:"./index.js",
/* webpack 輸出 */
output:{
    // 輸出 文件名
    filename:"./test.js"
},

}

2.2 安裝babel相關(guān)

安裝 babel-core 包
npm i --save-dev babel-core

安裝babel-preset-env 和 babel-preset-stage-0 包
npm i --save-dev babel-preset-env babel-preset-stage-0
babel-preset-env 是一個(gè)主流的 Babel 插件數(shù)組；Stage-X 是實(shí)驗(yàn)階段的 Presets

2.3 將 webpack 和 Babel 結(jié)合在一起

需要在兩者之間建立一條紐帶，而通過(guò) webpack 的 loaders 就可以生成這條紐帶，因此要修改 webpack.config.js 配置文件：

/ webpack loaders 配置 /
module:{

   rules:[
       {
           test:/.js$/,
           use:{
               loader:"babel-loader",
           },
       }
   ],

},

就是針對(duì)以 .js 結(jié)尾的文件使用 babel-loader。由于項(xiàng)目中還不存在 babel-loader，所以要先安裝該模塊：

npm i --save-dev babel-loader

通過(guò)使用 loader 語(yǔ)法配置 Babel 的 presets

使用 webpack 提供的方法，具體在 webpack.config.js 的 module.rules.use.options 中配置

 /* webpack loaders 配置 */
    module:{
        rules:[
            {
                test:/.js$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:[
                            "babel-preset-env",
                            "babel-preset-stage-0"
                        ]
                    }
                },
            }
        ],
    },

最終的項(xiàng)目結(jié)構(gòu)為：

在當(dāng)前目錄下執(zhí)行 webpack 命令

webpack

輸入文件 index.js 中的ES6代碼已經(jīng)被轉(zhuǎn)換成輸出文件 test.js 中的 ES5 代碼了：

3、Traceur轉(zhuǎn)碼器

Google公司的Traceur轉(zhuǎn)碼器，也可以將ES6代碼轉(zhuǎn)為ES5代碼。

3.1 直接在頁(yè)面中使用：

寫(xiě)ES6代碼，用：



注意：script標(biāo)簽的type屬性的值是module，而不是text/javascript。這是Traceur編譯器識(shí)別ES6代碼的標(biāo)識(shí)。


3.2 Traceur的命令行轉(zhuǎn)換方法：


首先需要用npm安裝。


$ npm install -g traceur



直接運(yùn)行ES6代碼，以index.js為例


$ traceur index.js



將ES6輸出為ES5腳本


$ traceur --script index.js --out es5.js



為了防止有些特性編譯不成功，最好加上–experimental選項(xiàng)。


$ traceur --script index.js --out es5.js --experimental





4、直接在線編譯


Babel提供一個(gè)REPL在線編譯器，可以在線將ES6代碼轉(zhuǎn)為ES5代碼。


轉(zhuǎn)換后的代碼，可以直接作為ES5代碼插入網(wǎng)頁(yè)運(yùn)行。


5、總結(jié)


使用babel搭建環(huán)境的順序：



創(chuàng)建項(xiàng)目創(chuàng)建兩個(gè)文件夾src和dist


使用npm init 初始化項(xiàng)目生成package.json（項(xiàng)目信息文件）


使用 npm install -g babel-cli 全局安裝


使用 npm install –save-dev babel-preset-es2015 babel-cli本地安裝


創(chuàng)建.babelrc文件（babel轉(zhuǎn)換的配置文件）


在src下創(chuàng)建js，編寫(xiě)ES6語(yǔ)法


babel src/index.js -o dist/index.js轉(zhuǎn)碼生成ES5語(yǔ)法



babel 本質(zhì)就是一個(gè) JavaScript 編譯器，通過(guò)：



將 JavaScript 源代碼解析成抽象語(yǔ)法樹(shù)（AST）；


將源代碼的 AST 結(jié)果一系列轉(zhuǎn)換生成目標(biāo)代碼的 AST；


將目標(biāo)代碼的 AST 轉(zhuǎn)換成 JavaScript 代碼。



當(dāng)然，感興趣的小伙伴可以深入研究下babel及其插件的源碼，了解其運(yùn)行機(jī)制，以便更全面的掌握ES6轉(zhuǎn)ES5的相關(guān)原理、機(jī)制。
           
               
                                           
                       
                 

            
                     
             
               

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

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101923.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                    
  • 
                                                
    
                          
    搭建es6開(kāi)發(fā)與非開(kāi)發(fā)環(huán)境babel-browser
    
                                                     
    摘要：前言最近打算把應(yīng)用到項(xiàng)目中，但是如何在開(kāi)發(fā)環(huán)境瀏覽器端直接運(yùn)行已經(jīng)發(fā)布一段時(shí)間了，現(xiàn)在大部分是在環(huán)境運(yùn)行，或者通過(guò)編譯之后運(yùn)行。主要實(shí)現(xiàn)用戶(hù)能夠在瀏覽器上直接運(yùn)行語(yǔ)法。

前言
最近打算把es6應(yīng)用到項(xiàng)目中，但是如何在開(kāi)發(fā)環(huán)境（瀏覽器端）直接運(yùn)行es6？es6已經(jīng)發(fā)布一段時(shí)間了，現(xiàn)在大部分是在node.js環(huán)境運(yùn)行，或者通過(guò)babel編譯之后運(yùn)行。babel-browser主要實(shí)現(xiàn)用戶(hù)能...
    
                                                   
                          
    
                                
    
                                    selfimpr
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                                                       
  • 
                                                
    
                          
    webpack 項(xiàng)目構(gòu)建：（二）ES6 編譯環(huán)境搭建
    
                                                     
    摘要：本質(zhì)就是一個(gè)編譯器，通過(guò)將源代碼解析成抽象語(yǔ)法樹(shù)將源代碼的結(jié)果一系列轉(zhuǎn)換生成目標(biāo)代碼的將目標(biāo)代碼的轉(zhuǎn)換成代碼。項(xiàng)目構(gòu)建三開(kāi)發(fā)環(huán)境本地服務(wù)器搭建源碼下載地址參考資料入門(mén)阮一峰中文文檔中文網(wǎng)

注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過(guò)程可能會(huì)有些出入。
??在上一章 webpack 項(xiàng)目構(gòu)建：（一）基本架構(gòu)搭建 我們搭建了一個(gè)最基本的 webpack 項(xiàng)目，現(xiàn)...
    
                                                   
                          
    
                                
    
                                    marser
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    搭建一個(gè)es6的開(kāi)發(fā)環(huán)境
    
                                                     
    摘要：前提是你已經(jīng)安裝了手動(dòng)創(chuàng)建一個(gè)工作目錄以下是的內(nèi)容在目錄下創(chuàng)建一個(gè)這里寫(xiě)我們的代碼接下來(lái)我們需要把語(yǔ)法編譯成我們?yōu)g覽器所識(shí)別的語(yǔ)法文件，那就用到我們的神奇在安裝之前我們要先初始化一下項(xiàng)目全局安裝輸入以下命令此時(shí)文件中就有的依賴(lài)了你以

1.前提是你已經(jīng)安裝了node,npm2.手動(dòng)創(chuàng)建一個(gè)工作目錄 dist,src,index.html  以下是index.html的內(nèi)容

    
 ...
    
                                                   
                          
    
                                
    
                                    jcc
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    如何搭建es6開(kāi)發(fā)環(huán)境
    
                                                     
    摘要：安裝此過(guò)程沒(méi)有難點(diǎn)，略過(guò)下載完成后可以通過(guò)和來(lái)查看是否安裝成功以及版本后安裝新建一個(gè)目錄項(xiàng)目名稱(chēng)進(jìn)入該項(xiàng)目，然后一路回車(chē)即可。

node.js安裝

此過(guò)程沒(méi)有難點(diǎn)，略過(guò)
下載完成后可以通過(guò)node -v和npm -v來(lái)查看是否安裝成功以及版本后

webpack 安裝

新建一個(gè)目錄(項(xiàng)目名稱(chēng)), 進(jìn)入該項(xiàng)目，npm init, 然后一路回車(chē)即可。(會(huì)生成一個(gè)package.json...
    
                                                   
                          
    
                                
    
                                    OldPanda
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    Omi原理-環(huán)境搭建
    
                                                     
    摘要：相關(guān)依賴(lài)有和其余都是單元測(cè)試相關(guān)依賴(lài)注意，這里使用了。因?yàn)槭褂每蚣苤С趾褪褂檬菫榱嗽趩卧獪y(cè)試?yán)锩媸褂玫暮偷日Z(yǔ)法。腳本其中生成目錄的文件執(zhí)行單元測(cè)試編譯的編譯的在中，會(huì)根據(jù)去設(shè)置不同的入口文件。

環(huán)境搭建
Omi框架使用 Webpack + ES6 的方式去開(kāi)發(fā)；使用karma+jasmine來(lái)作為Omi的測(cè)試工具。
Karma介紹
Karma是一個(gè)基于Node.js的JavaScrip...
    
                                                   
                          
    
                                
    
                                    lncwwn
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<