国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

npm + webpack + es6 初體驗(yàn)

seasonley / 746人閱讀

摘要:當(dāng)然,我們需要先下載配置下載和配置下載下載的加載器下載完了,要去進(jìn)行配置,配置完的文件如下可以看到,和之前的相比,增加了一個(gè)的配置。

準(zhǔn)備

下載Node.js和npm

一個(gè)命令行工具(我的是git bash)。不是必須的,用自帶的命令行也可以。

創(chuàng)建一個(gè)文件夾,作為根目錄,比如 npm-webpack-es6

這時(shí),你將看到一個(gè)空文件夾

開始

命令行打開至根目錄

鍵入 npm init,一路確定到y(tǒng)es ————————?jiǎng)?chuàng)建一個(gè)package.json。

文件夾如左

package.json 內(nèi)部如左

安裝webpack

安裝webpack前,先附上幾個(gè)常用的npm命令

npm init      這個(gè)指令會(huì)引導(dǎo)你創(chuàng)建一個(gè)package.json,包括版本作者等信息,有助于你發(fā)包。后面安裝的包的依賴關(guān)系也會(huì)在package.json里有體現(xiàn)。
npm install     直接執(zhí)行這個(gè)命令,會(huì)按照當(dāng)前目錄下的package.json的配置去安裝各個(gè)依賴的包。
npm install [module]    在當(dāng)前目錄安裝這個(gè)模塊。會(huì)去檢測(cè)該模塊是否存在于node_module文件夾中,存在了就不安裝了。 
npm install [module] -g    在全局進(jìn)行模塊安裝。全局模式下安裝的包,會(huì)自動(dòng)注冊(cè)到系統(tǒng)變量 path里的。
npm install [module] --save-dev    在當(dāng)前目錄下安裝這個(gè)模塊,但是僅在開發(fā)時(shí)使用。在package的"devDependencies"下,表示僅在開發(fā)的時(shí)候使用。

有一些包是需要用命令行的,這些需要注冊(cè)系統(tǒng)變量,因此像supervisor等包,一定要安裝在全局。否則就不能用它的命令行指令。
有一些包是在js中使用的,那么這些包安裝到當(dāng)前目錄就可以了。
webpack 一般建議全局安一個(gè),當(dāng)前目錄安一個(gè)。

我們剛才已經(jīng)使用了npm init創(chuàng)建了一個(gè)package.json,接下來我們開始安裝webpack。

首先在全局安裝一個(gè)webpack

執(zhí)行 npm install webpack -g         (已經(jīng)全局安裝webpack 的可以跳過這一步)

然后在當(dāng)前目錄下安裝一個(gè)webpack

執(zhí)行 npm install webpack --save

你會(huì)發(fā)現(xiàn)當(dāng)前目錄下新增了一個(gè)文件夾node_module,在里頭有著webpack的包

檢驗(yàn)下,webpack 安裝成功了沒

執(zhí)行  webpack -v

如果webpack安裝成功了,就會(huì)在命令行打印出webpack的版本和幫助。
如果失敗了,檢測(cè)一下有沒有在全局安裝webpack。

當(dāng)你執(zhí)行到這步,你的文件夾長(zhǎng)這個(gè)樣子

   --npm-webpack-es6
        --package.json
        --node_module
            --webpack

package.json長(zhǎng)這個(gè)樣子

{
  "name": "npm-webpack-es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.2"
  }
}
使用webpack來組織文件

在直接介紹使用es6模塊化語言來組織文件之前,我們先了解一下webpack的使用。
webpack會(huì)將我們用模塊化語言語法寫成的源文件,編譯成瀏覽器可識(shí)別的文件。也就是有從源文件→線上文件的過程。

我們來實(shí)踐一下:

首先在根目錄下創(chuàng)建一個(gè)文件夾src來放源文件;

再創(chuàng)建一個(gè)文件夾dist來放編譯后文件;

新建一個(gè)html文件來放html文件

最后創(chuàng)建一個(gè)webpack.config.js。 (先創(chuàng)個(gè)空的,待會(huì)兒加內(nèi)容)

這時(shí)你的目錄結(jié)構(gòu)將如下:

webpack.config.js是webpack的配置文件。
要搞懂webpack其實(shí)就是要懂得怎么來配置 webpack.config.js。
本文介紹一個(gè)基礎(chǔ)的配置,完整的配置教程請(qǐng)參照官網(wǎng)文檔——webpack官網(wǎng)文檔。

接下來:

在src中新建一個(gè)文件—— sourceFile.js

文件內(nèi)容,隨意點(diǎn):

//sourceFile.js
console.log("我是superman");

配置 webpack.config.js (關(guān)鍵一步)

module.exports = {
    entry:{
        bundle : __dirname + "/src/sourceFile.js" 
    },
    output:{
        path: __dirname + "/dist",
        filename: "[name].js"
    }
}

這個(gè)文件僅有entry和output,應(yīng)該是最簡(jiǎn)單的配置文件了。

module.exports 是CommonJS的寫法,這個(gè)是Node.js的規(guī)范

__dirname 代表當(dāng)前目錄,Node.js會(huì)去識(shí)別

entry中,值為一個(gè)路徑,代表源文件的存放位置。鍵,則可以隨便取,在我的配置中,編譯后文件的名字就是這里的鍵。

output中,path為編譯后的文件存放的文件夾。 filename 為編譯后文件夾名字。 其中[name]代表了entry中的鍵。也就是說上面是什么名字,編譯后就是什么名字。可以自己試驗(yàn)下。

使用webpack進(jìn)行編譯

在命令行鍵入 webpack -w            

成功編譯的話,命令行的顯示

同時(shí)在dist中會(huì)新出現(xiàn)一個(gè) bundle.js, 代碼長(zhǎng)這個(gè)樣子:

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};

/******/     // The require function
/******/     function __webpack_require__(moduleId) {

/******/         // Check if module is in cache
/******/         if(installedModules[moduleId])
/******/             return installedModules[moduleId].exports;

/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             exports: {},
/******/             id: moduleId,
/******/             loaded: false
/******/         };

/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/         // Flag the module as loaded
/******/         module.loaded = true;

/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }


/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;

/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;

/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";

/******/     // Load entry module and return exports
/******/     return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    console.log("我是superman");

/***/ }
/******/ ]);

可以看到編譯后的js多了很多額外的內(nèi)容,所以如果項(xiàng)目小的話是不需要模塊化的。模塊化是用來構(gòu)建中大型項(xiàng)目的。

來看看效果

在html文件夾下新建一個(gè) test.html




    
    看看我們編譯后的js可不可以用


    

在瀏覽器打開test.html,你會(huì)看到瀏覽器的console中:

說明我們將源文件sourceFile.js編譯后生成的bundle.js,是可以正常使用的。

疑惑

 這樣子做的話,和html中直接引用源文件效果是一樣的啊。話說為什么要編譯啊?這樣不是更麻煩嗎?

這是我剛接觸webpack的感受。后來,我逐步理解了,編譯其實(shí)是為了實(shí)現(xiàn)模塊化。基于AMD/CMD/CommonJS/es6的語法,瀏覽器是無法識(shí)別的。這些規(guī)范的語法,你可以感受一下:

 //AMD
require(["moduleA", "moduleB", "moduleC"], function (moduleA, moduleB, moduleC)
{
    alert("加載成功");
});

//CMD
seajs.use("../static/hello/src/main")

//CommonJS
module.export = {
    name:"rouwan"
}

//es6模塊
import {module1, module2} form "./module.js";

這些規(guī)范使用的語法,瀏覽器是不能識(shí)別的。不信你試一下,立馬報(bào)錯(cuò)。除非未來幾年,瀏覽器支持es2015的import和export。因此,需要由webpack來編譯,編譯后的文件,瀏覽器能夠識(shí)別。

現(xiàn)在,我們開始使用es6模塊語法來組織模塊吧

使用es6模塊語法

webpack可以支持es6語法。這個(gè)也是為什么webpack強(qiáng)大的原因。用es6a ,想想就爽。
當(dāng)然,我們需要先下載配置babel

下載和配置babel
下載babel:

npm install --save-dev babel-loader babel-core babel-preset-es2015  //下載babel的webpack加載器

下載完了,要去webpack.config.js進(jìn)行配置,配置完的文件如下:

module.exports = {
    entry:{
        bundle : __dirname + "/src/sourceFile.js"
    },
    output:{
        path: __dirname + "/dist",
        filename: "[name].js"
    },
    module:{
        loaders:[{
            test: /.js$/,
            loader: "babel?presets=es2015"
        }]
    }
}

可以看到,和之前的webpack.config.js相比,增加了一個(gè)loaders的配置。
大致意思是:所有的js文件,使用babel加載器來翻譯一下
具體配置原理可查官網(wǎng)文檔 loader的api

怎么看自己是否配置好呢?待會(huì)兒webpack編譯時(shí)看有沒有報(bào)錯(cuò),瀏覽器端有沒有識(shí)別es6語法就知道了。

開始使用es6模塊
在src文件夾下新建一個(gè)文件——moduleTest.js

//moduleTest.js
function say(){
    console.log("我引用了一個(gè)模塊")
}

export {say}

將sourceFile.js的內(nèi)容改為:

//sourceFile.js
import {say} from "./moduleTest.js";
say();

在命令行運(yùn)行webpack編譯指令

webpack -w

如果沒有報(bào)錯(cuò),先開心一下。嘿嘿。
別急,先去打開test.html看看,如果你看到了命令行成功打印

那么,恭喜你,這個(gè)demo完整地跑完了。

結(jié)語

前端工程化是大勢(shì)所趨,我們將不再人工去實(shí)現(xiàn) 依賴管理,代碼壓縮混淆,測(cè)試,上線等開發(fā)流程,轉(zhuǎn)而交由工具去完成。這些工具中,npm作為優(yōu)秀的包管理工具,節(jié)省了我們?cè)谒阉鞲鱾€(gè)庫的官網(wǎng)下載庫的時(shí)間,方便我們進(jìn)行包的下載,更新,和依賴管理;webpack作為優(yōu)秀的模塊化構(gòu)建工具,支持多種模塊化規(guī)范,并能將css/字體/圖片作為模塊管理,編譯各類js方言,有著豐富的插件,已經(jīng)超出了一個(gè)模塊加載器的范圍,成為了一款強(qiáng)大的前端構(gòu)建工具。

本文僅僅介紹了一個(gè)最簡(jiǎn)單的demo,因?yàn)槲乙舱趯W(xué)習(xí)中。詳細(xì)的資料,還是要去看文檔并實(shí)踐,這里給出幾個(gè)傳送門以便大家詳細(xì)了解npm/webpack/es6模塊的知識(shí)。

npm常用指令
webpack官方文檔
阮一峰的ECMA6入門——es6模塊

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

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

相關(guān)文章

  • webpack+react項(xiàng)目體驗(yàn)——記錄我的webpack環(huán)境配置

    摘要:安裝寫在里安裝和配置和之前一樣用來處理文件相關(guān)的這個(gè)包括的就比較多,有,后面兩個(gè)是為了寫和服務(wù)。 這兩天學(xué)習(xí)了一些webpack的知識(shí),loaders+plugins真的很強(qiáng)大!不過配置起來也很復(fù)雜,看了一些文章,自己也寫了項(xiàng)目練手,寫下來加深自己的印象。 首先,非常非常推薦的幾篇文章,初學(xué)者一定要看!http://www.jianshu.com/p/42e1...(標(biāo)題一點(diǎn)也不夸張,...

    csRyan 評(píng)論0 收藏0
  • flint簡(jiǎn)單體驗(yàn)

    摘要:它能夠使得在不刷新瀏覽器的情況下,更改本地的前端代碼組件,瀏覽器自動(dòng)更新預(yù)覽。直接集成了這項(xiàng)技術(shù),而且建立了專門的通道進(jìn)行錯(cuò)誤的實(shí)時(shí)反饋。命令行提供了三個(gè)主要的命令,。服務(wù)器關(guān)于服務(wù)器,其實(shí)是內(nèi)部起了一個(gè)基于的服務(wù)器,外加進(jìn)行消息的通訊。 跟著初探了下flintjs,的確會(huì)很棒,超級(jí)熱更新! 學(xué)習(xí)地址: http://frontenddev.org/link/ali-11-11-...

    Batkid 評(píng)論0 收藏0
  • webpack打包體驗(yàn)

    摘要:確保在和環(huán)境下,如果沒有,先安裝環(huán)境。我的新建一個(gè)文件夾,在命令行里進(jìn)入執(zhí)行此時(shí),文件夾下多了一個(gè)文件。本文僅獻(xiàn)給初學(xué)的同學(xué),功能強(qiáng)大,想要學(xué)好仍需多多學(xué)習(xí)。 1、確保在node和npm環(huán)境下,如果沒有,先安裝node環(huán)境。我的node: showImg(https://segmentfault.com/img/bVbu1T2); 2、新建一個(gè)文件夾web,在命令行里進(jìn)入web,執(zhí)行 ...

    canopus4u 評(píng)論0 收藏0
  • 前端模塊化——技術(shù)選型

    摘要:前言前端模塊化,主要是解決兩個(gè)問題命名空間沖突,文件依賴管理。目前解決的方法是模塊化命名空間各個(gè)模塊的命名空間獨(dú)立。模塊化構(gòu)建工具,等是用來組織前端模塊的構(gòu)建工具加載器。 前言 前端模塊化,主要是解決兩個(gè)問題——命名空間沖突,文件依賴管理。 坑___命名空間沖突 我自己測(cè)試好的代碼和大家合并后怎么起沖突了? 頁面腳本的變量或函數(shù)覆蓋了公有腳本的。 坑___文件依賴管理 明明項(xiàng)目需...

    Doyle 評(píng)論0 收藏0
  • webpack使用

    摘要:引用網(wǎng)上一作者的話將前端項(xiàng)目當(dāng)成一項(xiàng)系統(tǒng)工程進(jìn)行分析組織和構(gòu)建從而達(dá)到項(xiàng)目結(jié)構(gòu)清晰分工明確團(tuán)隊(duì)配合默契開發(fā)效率提高的目的。提示,是因?yàn)槿鄙龠@個(gè)文件。 前端工程化 在網(wǎng)頁比較簡(jiǎn)單的時(shí)代,以文件可以包含 HTML、CSS、JS;到后來結(jié)構(gòu)、樣式、行為的分離,文件開始多起來,慢慢的出現(xiàn)了AMD,CMD ,CommonJS,ES6 Module等,技術(shù)變化日新月異,把這些技術(shù)統(tǒng)一整合起來,就是...

    habren 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<