vue-cli+webpack+babel 搭建項目初始環境

一、檢查是否安裝了node，node -v，

二、檢查npm版本，npm -v，

三、進入項目的地址（個人是直接創建在桌面上的，比較懶），cd desktop，

四、安裝cnpm（緣由：由於npm安裝速度超級慢，cnpm是淘寶鏡像很快，也是一個小技巧哈），（若是安裝失敗，建議檢查一下npm版本）

npm install -g cnpm --registry=https://registry.npm.taobao.org，

五、用cnpm全局安裝vue-cli，cnpm install -g vue-cli，

六、開始初始化項目vue-cli+webpack，vue init webpack Gdie（Gdie是項目名），

七、填寫一些基本信息配置，

八、項目初始化完成，進入項目cd Gdie，

九、啓動項目，npm run dev，

十、項目構建成功，在瀏覽器輸入localhost:8080，

（說明：由於我已經構建了一個項目，端口是8080，因此這個新的vue-projec項目t端口是8080，只有一個項目的狀況下端口都是8080，其實只要你們只要正確輸入TA提供的端口號就能看到效果，不論幾個項目在運行都不會影響），

效果如圖：

11.安裝babel

webpack - babel配置

babel是一個javascript編譯器，是前端開發中的一個利器。它突破了瀏覽器實現es標準的限制，使咱們在開發中可使用最新的javascript語法。

經過構建和babel，可使用最新js語法進行開發，最後自動編譯成用於瀏覽器或node環境的代碼。

webpack中使用babel

配合webpack使用babel前，須要首先使用npm init初始化一個項目，npm install -g webpack安裝webpack（全局安裝是爲了在命令行使用webpack命令）。

• 安裝babel-loader, babel-core, babel-preset-env。

npm install --save-dev babel-loader babel-core babel-preset-env
其中，babel-preset-env插件是爲了告訴babel只編譯批准的內容，至關於babel-preset-es2015, es2016, es2017及最新版本。經過它可使用最新的js語法。

• 配置webpack.config.js

在webpack配置文件中配置bable-loader

module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['env',{
                            targets: {
                                browsers: ['> 1%', 'last 2 versions']
                            }
                        }]
                    ]
                }
            },
            exclude: '/node_modules/'
        }
    ]
}複製代碼

其中，exclude是定義不但願babel處理的文件。targets是presets的一些預設選項，這裏表示將js用於瀏覽器，只確保佔比大於1%的瀏覽器的特性，主流瀏覽器的最新兩個主版本。
更多與配置有關的信息，能夠參考：
babel env preset設置,
browserlist預設置.

• 在命令行中運行相應webpack命令便可。
• 因爲babel-preset配置選項較多，咱們通常能夠在根目錄下創建.babelrc文件，專門用來放置babel preset配置，這是一個json文件。能夠將上述配置修改以下：

//.bablerc文件
{
    "presets": [
        ['env',{
            "targets": {
                "browsers": ['> 1%', 'last 2 versions']
            }
        }]
    ]
}

//原webpack.config.js文件
module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader'
            },
            exclude: '/node_modules/'
        }
    ]
}複製代碼

babel-polifill插件

在上面的babel配置中，babel只是將一些es6，es7-8的語法轉換成符合目標的js代碼，可是若是咱們使用一些特性或方法，好比Generator, Set, 或者一些方法。babel並不能轉換爲低版本瀏覽器識別的代碼。這時就須要babel-polifill。

簡單的說，polifill就是一個墊片，提供了一些低版本es標準對高級特性的實現。使用polifill的方法以下：

npm install --save babel-polifill

而後在應用入口引入polifill，要確保它在任何其餘代碼/依賴聲明前被調用。

//CommonJS module
require('babel-polyfill');

//es module
import 'babel-polifill';複製代碼

在webpack.config.js中，將babel-polifill加入entry數組中：

entry: ["babel-polifill", "./app.js"]複製代碼

相比於runtime-transform，polifill用於應用開發中。會添加相應變量到全局，因此會污染全局變量。

更多細節參考babel-polifill。

runtime-transform插件

runtime transform也是一個插件，它與polifill有些相似，但它不污染全局變量，因此常常用於框架開發。

安裝：
npm install --save-dev babel-plugin-transform-runtime

npm install --save babel-runtime

用法：
將下面內容添加到.bablerc文件中

{
    "plugins": ["transform-runtime"]
}複製代碼