gulp+webpack+babel

時間 2019-11-12

標籤 gulp+webpack+babel gulp webpack babel 欄目 JavaScript 简体版

原文原文鏈接

一

一、安裝nodejs

node -v #查看安裝的nodejs版本，出現版本號
npm -v #查看npm的版本號，npm是在安裝nodejs時一同安裝的nodejs包管理器

二、外部文件引用

1) lib文件：php

exports.函數名 或者 module.exports.函數名 = function() {
    //...
}
exports.變量名 = 值

2) require引用：css

var getLib = require("腳本文件路徑/內置模塊名/外部模塊名");
getLib.函數名();

執行流程：
一、看看它內置模塊中是否有，若有優先加載內置模塊
二、若是沒有則看是不是「路徑級」的引用
三、以上都不是則會在node_modules去尋找同名文件夾html

進入第三步後，會默認尋找 index.js，若是沒有則會查看 package.json 是否作了 main 定義前端

{
  "name": "test",   //項目名稱（必須）
  "version": "1.0.0",   //項目版本（必須）
  "description": "This is for study gulp project !",   //項目描述（必須）
  "homepage": "",   //項目主頁
  "repository": {    //項目資源庫
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //項目做者信息
    "name": "surging",
    "email": "surging2@qq.com"
  },
  "license": "ISC",    //項目許可協議
  "devDependencies": {    //項目依賴的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

三、Npm使用

npm（node package manager）nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）。
官方包鏡像網站：https://www.npmjs.com/java

1） 使用npm安裝插件
在項目根目錄下執行：npm install <name> [-g] [--save-dev]，安裝成功會在項目根目錄自動建立 node_modules 文件夾，其中包含全部安裝的模塊node

name：node插件名稱。例：npm install jquery@1.11.0 --save-dev（@表明指定版本）
-g：全局安裝，將會安裝在C:\Users\Administrator\AppData\Roaming\npm，而且寫入系統環境變量；非全局安裝：將會安裝在當前定位目錄；全局安裝能夠經過命令行在任何地方調用它，本地安裝將安裝在定位目錄的node_modules文件夾下，經過require()調用
–save：將保存配置信息至package.json（package.json是nodejs項目配置文件）
-dev：保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點；通常保存在dependencies的像這些express/ejs/body-parser等

Q：爲何要保存至package.json
A：由於node插件包相對來講很是龐大，因此不加入版本管理，將配置信息寫入package.json並將其加入版本管理，其餘開發者對應下載便可（命令提示符執行npm install，則會根據package.json下載全部須要的包，npm install --production只下載dependencies節點的包）。jquery

2）使用npm卸載插件
在項目根目錄下執行：npm uninstall <name> [-g] [--save-dev]webpack

刪除多個插件：npm uninstall gulp-less gulp-uglify gulp-concat ……
藉助rimraf：npm install rimraf -g 用法：rimraf node_modules

3） 使用npm更新插件
在項目根目錄下執行：npm update <name> [-g] [--save-dev]git

更新所有插件：npm update [--save-dev]

4） 查看npm幫助
npm help

5） 當前目錄已安裝插件
npm list

PS：npm安裝插件過程：從http://registry.npmjs.org下載對應的插件包（該網站服務器位於國外，因此常常下載緩慢或出現異常）

四、安裝cnpm / 設置淘寶鏡像源

由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常。來自官網：「這是一個完整 npmjs.org 鏡像，你能夠用此代替官方版本(只讀)，同步頻率目前爲 10分鐘一次以保證儘可能與官方服務同步。」

官網：http://npm.taobao.org

1）方法1

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

PS：cnpm跟npm用法徹底一致，只是在執行命令時將npm改成cnpm

2）方法2
編輯 nodejs / node_modules / npm / .npmrc 文件，在最後加入：

registry=https://registry.npm.taobao.org

五、nodejs模擬編譯生成js文件

var getlib = require('mylib1');
var getfile = require('fs');

getfile.writeFile('build.js','');
for(var key in getlib) {
    //console.log(key+'-'+getlib[key]);
    getfile.appendFile('build.js', genCode(key, getlib[key]));
}

function genCode(key, value) {
    return 'var ' + key + '=' + value + ';\n';
}

fs：專門用來處理文件的內置模塊
var file=require(‘fs’) ;
file.readFile / readFileSync：讀文件（異步/同步）
file.readdir / readdirSync：讀文件夾（異步/同步）
file.writeFile：寫文件
file.appendFile：追加文件

六、獲取當前腳本的全部對象

Nodejs頂層對象：global
只須要循環 global.process.mainModule.children 這個子對象便可

for(var i=0;i< global.process.mainModule.children.length;i++)
 {
   var child=global.process.mainModule.children[i];
   for(var key in child.exports) //child.exports就是咱們導出的屬性
   {
       //...
   }
 }

七、使用正則

var pattern=/['|"](.*\.jpg)['|"]/g;
while(var res=pattern.exec(data.toString()))
{
 // res[0]：匹配到的內容
 // res[1]：分組內容
}

八、將圖片轉化爲base64

首先經過 readFile() 把圖片讀取出來，而後執行：getImg.toString('base64')
css加載格式：background:url(「data:image/jpg;base64,xxx」)

九、Nodejs請求（CURL）

1）安裝 request 庫：npm install request --save-dev
2）調用

var request = require('request');
exports.loadNews = function(callback) {
    request.get('http://127.0.0.1/nodejs/t1/server/news.php', function(err, response, body){
        if(!err && response.statusCode==200) {
            // 執行成功
            callback(body); 
        }
    });
}

十、Json

Nodejs內置了一個 JSON 對象：

JSON.parse(str);    //把json字符串轉化爲對象並返回
JSON.stringify(obj);    //把對象轉化爲字符串並返回

十一、EJS模板引擎

官網：http://www.embeddedjs.com/
下載：npm install ejs --save-dev

1）模板頁面：

<h3><%=title%></h3>
<p><%=content%></p>
<ul>
    <% for(var i in list){ %>
        <li><%= list[i].name %></li>
    <% } %>
</ul>

2）渲染模板：

var fs = require('fs'); // 引入文件操做庫
fs.readFile('./index.html', function(err, get_template){
    if(!err) {
        // 讀取模板文件成功
        get_template = get_template.toString(); // 文件內容轉爲字符串
        var ejs = require('ejs'); // 引入ejs庫
        var template_data = { // 建立數據源
            'title' : 'test title',
            'content' : 'content......',
            'list' : [
                {'title' : 'zhangsan'},
                {'title' : 'lisi'},
                {'title' : 'wangwu'},
            ]
        };
        var html = ejs.render(get_template, template_data); //渲染模板
        console.log(html); // 輸出最終內容
    }
})

二

一、安裝gulp

gulp是基於 Nodejs 的自動化構建工具（任務運行器），它能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。經過本文，咱們將學習如何使用Gulp來改變開發流程，從而使開發更加快速高效。

gulp 和 grunt 很是相似，但相比於 grunt 的頻繁 IO 操做，gulp 的流操做，能更快地更便捷地完成構建工做

1）在項目根目錄下建立package.json

npm init

2）安裝

npm install -g gulp // 全局安裝
npm install gulp --save-dev // 當前項目安裝 
npm -v

3）測試
在項目根目錄下建立gulp配置文件：gulpfile.js

var gulp = require('gulp');
gulp.task('t1', [options], function(){
    console.log('task 1...');
});

執行：gulp t1

二、gulp函數

1） gulp.src([文件1,文件2,文件3])
用來」收集」源文件造成「虛擬文件對象流」，而後經過「管道」函數 pipe 傳給它另一個寫文件的函數 dest，如：

gulp.src([「1.js」,」2.js」]).pipe(gulp.dest(「文件夾名」);
gulp.src([「*.js」,」!2.js」]).pipe(gulp.dest(「文件夾名」); // 使用通配符

通配符：
*：匹配全部文件例：a/*.js（包含a下的全部js文件）
**：匹配0個或多個子文件夾例：a/**/*.js（包含a的0個或多個子文件夾下的js文件）
{}：匹配多個屬性例：{a,b}.js（包含a.js和b.js文件）；src/*.{jpg,png,gif}（src下的全部jpg/png/gif文件）
!：排除文件例：!a.js（不包含a.js文件）

三、gulp插件

1）合併插件：Npm install gulp-concat --save-dev

var concat=require(「gulp-concat」);  //引入
gulp.src([文件列表]).pipe(concat(「合併後的文件」).pipe(gulp.dest(「目錄」))

2）壓縮插件：npm install gulp-uglify --save-dev

var uglify=require(「gulp-uglify」); // 引入
gulp.src([文件列表]).pipe(uglify().pipe(gulp.dest(「目錄」))

3）關聯 gulp 和 webpack 的插件：npm install gulp-webpack --save-dev

var gulp_webpack = require('gulp-webpack'); // 引入
var config_gulp_webpack = require('./webpack.config.js');   // 設置webpack配置文件
var webpack = require('webpack');   // 設置獨立的webpack
gulp.src([文件列表]).pipe(gulp_webpack(config_gulp_webpack, webpack))
    .pipe(uglify().pipe(gulp.dest(「目錄」));

也能夠直接在 gulp 中調用 webpack：

var config_gulp_webpack = require('./webpack.config.js');   // webpack配置文件
var webpack = require('webpack');   // 外部webpack
gulp.task('run', function(){
    // 調用webpack
    webpack(config_gulp_webpack, function(err, status){

    });
});

4）簡單模板插件：npm install gulp-template --save-dev

var gulp_template = require('gulp-template');   // 引入
gulp.src([文件列表]).pipe(gulp_template({
        key : value
    }))
    .pipe(gulp.dest(「目錄」));

在模板文件中使用：

<%=key%>

5）文件重命名插件：npm install gulp-rename --save-dev

var gulp_rename = require('gulp-rename');   // 引入
gulp.src([文件列表]).pipe(gulp_rename(新名稱)).pipe(gulp.dest(「目錄」));

6）ejs模板引擎插件：npm install gulp-ejs --save-dev

var gulp_ejs = require('gulp-ejs'); // 引入
// 建立數據源
var template_data = { 
    'title' : 'test title',
    'content' : 'content......',
    'list' : [
        {'title' : 'zhangsan'},
        {'title' : 'lisi'},
        {'title' : 'wangwu'},
    ]
};
gp.src([文件列表]).pipe(gulp_ejs(template_data)).pipe(gulp.dest(「目錄」));

四、安裝Webpack與配置

前端構建框架（模塊打包）webpack 遵循 CommonJS 規範（http://commonjs.org），它能幫咱們把原本須要在服務端運行的JS代碼，經過模塊的引用和依賴打包成前端可用的靜態文件。

1）安裝

npm install webpack -D  // 項目安裝
npm install -g webpack  // 全局安裝

webpack@4 以後 cli 移到了新包 webpack-cli，還須要安裝它：

npm install webpack-cli -D  // 項目安裝
npm install -g webpack-cli  // 全局安裝

2）基本配置
在項目根目錄下建立配置文件 webpack.config.js：

var path = require("path");
module.exports = {
    mode: 'production', // 調試模式：development | production
    entry:[    //entry 是入口文件，能夠多個，表明要編譯那些js
        './a.js'
    ],
    output: {
        path: path.resolve(__dirname, './build/js'),  //輸出文件夾
        filename: 'build.js'   //最終打包生成的文件名
    }
}

3）全局引用庫

var webpack = require('webpack');
module.exports = {
    plugins:[
        new webpack.ProvidePlugin({
            $ : 'jquery' //這裏請確保你的jquery已經安裝了,不然要路徑引用
        })
    ]
}

4）多節點打包與分離

webpack 4.0.0-beta.0刪除了 CommonsChunkPlugin，以支持兩個新的選項（optimization.splitChunks 和 optimization.runtimeChunk）。

var path = require("path");
module.exports = {
    entry:{
         main : './src/main.js',
         user : ['./src/login.js', './src/reg.js']
    },
    output: {
        path: path.resolve(__dirname, './build/js'), // 打包後所放的路徑,
        filename: 'build_[name].js'   
    },
    optimization : {
        minimize: false,
        splitChunks : {
            chunks: "all",
            cacheGroups: {  // 這裏開始設置緩存的 chunks  
                default : false, 
                vendor : false,
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all"
                }
            }
        }
    }
}

webpack automatically splits chunks based on these conditions:

New chunk can be shared OR modules are from the node_modules folder

New chunk would be bigger than 30kb (before min+gz)

Maximum number of parallel request when loading chunks on demand would be lower or equal to 5

Maximum number of parallel request at initial page load would be lower or equal to 3

When trying to fullfill the last two conditions, bigger chunks are preferred.

5）外部擴展 Externals

防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)。

例如，從 CDN 引入 jQuery，而不是把它打包：

index.html

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

webpack.config.js

module.exports = {
     externals: {
        'jquery' : 'jQuery' // 或$（Window.jQuery == Window.$）
    },
}

這樣就剝離了那些不須要改動的依賴模塊，換句話，下面展現的代碼還能夠正常運行

import $ from 'jquery';    // 引入外部的jquery 
// 或 var $ = require('jquery');
$('.my-element').animate(...);

五、WebPack插件

1）html-webpack-plugin：npm install html-webpack-plugin --save-dev

參考地址：https://github.com/webpack-contrib/html-webpack-plugin

var HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入
module.exports =
{
    entry:{
         main : './src/main.js',
         user : ['./src/login.js', './src/reg.js']
    },
    output: {},
    plugins:[
        new HtmlWebpackPlugin({
            filename: __dirname+'/build/html/login.html', // 生成路徑
            template: __dirname+'/src/tpl/login.html', // 模板路徑
            inject:'body', // 生成到頁面的位置：head | body(默認)
            hash:true // 若是爲true會給全部script和css添加一個惟一的webpack編譯hash值
            chunks:['mian','user'] // 按需加載chunks，若是js文件中引入了css文件，也會被一同加載（對應entry節點的key）
        })
    ]
}

2）style-loader 和 css-loader（將css內嵌到腳本中）

參考地址：
https://github.com/webpack-contrib/style-loader
https://github.com/webpack-contrib/css-loader

npm install style-loader --save-dev // 將模塊的導出做爲樣式添加到 DOM 中
npm install css-loader --save-dev   // 解析 CSS 文件後，使用 import 加載，而且返回 CSS 代碼

index.html

require('./css/main.css');
// 或
import style from './css/main.css';

webpack.config.js

module.exports = {
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader'}
                ]
            }
        ]
    }
}

3）extract-text-webpack-plugin（分離css文件）：npm install extract-text-webpack-plugin --save-dev

參考地址：https://github.com/webpack-contrib/extract-text-webpack-plugin

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("[name].css"),
  ]
}

它會將輸入塊中全部必需的*.css模塊移動到單獨的CSS文件中。因此你的樣式再也不被內聯到JS包中，而是在一個單獨的CSS文件（ styles.css ）中。若是您的樣式表總量很大，那麼它會更快，由於CSS包與JS包並行加載。

webpack4會報以下錯誤：

解決方法：執行 npm install extract-text-webpack-plugin@next

4）raw-loader（以字符串的方式讀取文件）：npm install raw-loader --save-dev

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

在你的項目中

var getHeader = require('./header.include');
// 或 import getHeader from './header.include';

// 若是不在webpack配置文件中配置，能夠在引入時指定加載器
var getHeader = require('raw-loader!./header.include');

5）url-loader（使用base64編碼加載文件）：npm install --save-dev url-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: {
            loader: 'url-loader',
            options: {
                limit: 81920
            }
        }
      }
    ]
  }
}

而後能夠在被腳本引入的css文件中加載圖片：

#test{
    background: url("./a.jpg"); // a.jpg會被webpack自動編碼爲base64格式
}

六、分離公共頭文件

header.include

<div id="header">
    <span>this is header！這是頭文件yeh!</span>
</div>

1）使用腳本動態加載頭文件

main.js

var getHeader = require('raw-loader!../../tpl/header.include'); // 引用raw-loader
$('body').prepend(getHeader);  // 動態添加

2）使用htmlWebpackPlugin模板

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<%=require('raw-loader!./header.include')%> <!-- webpack會自動替換爲模板內容 -->
<h1>Hello, Index!</h1>
</body>
</html>

3）使用htmlWebpackPlugin變量

webpack.config.js

module.exports = {
    ...
    plugins: [
        new htmlWebpackPlugin({
            filename: __dirname+'/build/html/index.html',
            template: __dirname+'/src/tpl/index.html',
            inject: 'body',
            hash: true,
            chunks: ['main','testLib1'],
            // 自定義屬性
            include : {
                header : require('fs').readFileSync('./src/tpl/header.include')
            }
        })
    ]
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<%=htmlWebpackPlugin.options.include.header%>
<h1>Hello, Index!</h1>
</body>
</html>

三

一、babel母體安裝

1）首先確保根目錄有 package.json 文件
本地安裝：npm install --save-dev babel-cli
使用本地安裝的好處：

同一機器上的不一樣的項目能夠依賴不一樣版本的 Babel, 這容許你一次更新一個項目。
這意味着在你的工做環境中沒有隱含的依賴項。它將使你的項目更方便移植、更易於安裝。

2）使用
咱們將把咱們的指令放在本地版本的 npm 腳本中，而不是直接經過命令行來運行 Babel.
簡單的在你的 package.json 中添加一個「scripts」屬性並將 babel 命令放在它的 build 屬性中。

{
+   "scripts": {
+     "build": "babel index.js -o index-build.js"
+   }
  }

從終端執行：npm run build

二、安裝Env preset

根據你支持的環境自動決定適合你的 Babel 插件的 Babel preset。它使用了 compat-table

本地安裝：npm install babel-preset-env --save-dev
而後在項目根目錄建立 .babelrc 配置文件：

{
  "presets": ["env"] }

三、使用 webpack 聯合 babel 編譯

1）本地安裝 babel-loader：npm install babel-loader --save-dev
2）配置 webpack.config.js

module.exports = {
    ...
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
            }
          }
        }
      ]
    }
}

更多相關文章...

相關標籤/搜索

JavaScript

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。