從模塊化到認識Babel

轉載自：https://www.cnblogs.com/qcloud1001/p/10167756.html

https://blog.csdn.net/a250758092/article/details/78543440

1.模塊化

模塊化是指把一個複雜的系統分解到一個一個的模塊。

模塊化開發的優勢：

(1)代碼複用，讓咱們更方便地進行代碼管理、同時也便於後面代碼的修改和維護。

(2)一個單獨的文件就是一個模塊，是一個單獨的做用域，只向外暴露特定的變量和函數。這樣能夠避免污染全局變量，減小變量命名衝突。

js模塊化規範有：CommonJS、AMD、CMD、ES6的模塊系統。

 

1.1 CommonJS 規範

是服務器端模塊的規範，由nodejs推廣使用。該規範的核心思想是：容許模塊經過require方法來同步加載所要依賴的其餘模塊，而後經過 exports 或 module.exports 來導出須要暴露的接口。

// 導出
module.exports = moduleA.someFunc;
// 導入
const moduleA = require('./moduleA');

1.2 AMD

AMD採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。因爲不是JavaScript原生支持，使用AMD規範進行頁面開發須要用到對應的庫函數，也就是require.js（還有個js庫：curl.js）

// 定義一個模塊
define('module', ['dep'], function (dep) {
  return exports;
});

// 導入和使用
require(['module'], function (module) {
});

1.3 ES6模塊化

ES6在語言的層面上實現了模塊化。瀏覽器廠商和 Node.js 都宣佈要原生支持該規範。它將逐漸取代 CommonJS 和 AMD 規範，成爲瀏覽器和服務器通用的模塊解決方案。

在 ES6 中，使用export關鍵字來導出模塊，使用import關鍵字引用模塊。可是瀏覽器尚未徹底兼容，須要使用babel轉換成ES5。

// 導出
export function hello() { };
export default {
  // ...
};
// 導入
import { readFile } from 'fs';
import React from 'react';

使用import導入模塊時，須要知道要加載的變量名或函數名。

在ES6中還提供了export default，爲模塊指定默認輸出。對應導入模塊import時，不須要使用大括號。

2. Babel

在1.3中，咱們提到了因爲瀏覽器兼容問題，須要使用Babel將es6轉成es5。官方給出的定義是，將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便可以運行在當前和舊版本的瀏覽器或其餘環境中。從中，咱們能夠看出，Babel的主要功能是「翻譯」。

實際上babel轉換後的代碼是遵循commonJS規範的，而這個規範，瀏覽器(支持的是 ECMA Script)並不能識別。所以導入到瀏覽器中會報錯，而nodeJS是commonJS的實現者，因此在babel轉換後的代碼是能夠在node中運行的。

爲了將babel生成的遵循commonJS規範的es5寫法可以在瀏覽器上直接運行，咱們就藉助webpack這個打包工具來完成。【歸納一下：流程是 es6->es5(commonJS規範)->瀏覽器可執行代碼】

 

Babel中的preset：即一組預先設定的插件（plugins）

2.1 Babel配置文件的選擇

以前版本的babel都是使用.baberc來作配置文件，babel7引入了babel.config.js。可是它並非.baberc的替代品，兩者根據使用的場景不一樣自行選擇。

.babelrc

{
  "presets": ["@babel/preset-flow","@babel/preset-react", "@babel/preset-typescript"],
  "plugins": [...]
}

babel.config.js

module.exports = function () {
  const presets = [ 
      ["env", {
            "targets": { //指定要轉譯到哪一個環境
                //瀏覽器環境
                "browsers": ["last 2 versions", "safari >= 7"],
                //node環境
                "node": "6.10", //"current"  使用當前版本的node
                
            },
             //是否將ES6的模塊化語法轉譯成其餘類型
             //參數："amd" | "umd" | "systemjs" | "commonjs" | false，默認爲'commonjs'
            "modules": 'commonjs',
            //是否進行debug操做，會在控制檯打印出全部插件中的log，已經插件的版本
            "debug": false,
            //強制開啓某些模塊，默認爲[]
            "include": ["transform-es2015-arrow-functions"],
            //禁用某些模塊，默認爲[]
            "exclude": ["transform-es2015-for-of"],
            //babel / preset-env處理polyfill的方式。
            //參數：usage | entry | false，默認爲false.
            "useBuiltIns": false
     }]
 ];
  const plugins = [ "@babel/transform-arrow-functions" ];

  return {
    presets,
    plugins
  };
}

 useBuiltIns的三個參數都是什麼意思呢？

• entry：在引用程序入口導入一次babel / polyfill，屢次導入可能會有全局衝突或其餘問題。

• usage：自動爲每一個文件添加特定的polyfill

• false：不要爲每一個文件自動添加polyfill，也不要將「@ babel / polyfill」導入到單個polyfill。

babel.config.js: 項目範圍內的配置，放在根目錄下。配置可用於node_modules文件。

.babelrc:文件一般用於根目錄下有多個package的項目，放在packages目錄下；或者放在packages的子目錄下，但須要在babel.config.js文件中進行配置

 

babelrcRoots: [
  ".",
  "packages/*",
],

 

2.2 須要安裝的依賴

• @babel/core：這個是babel的核心包，核心的api都在這裏。

• @babel/cli ：這是一個經過命令對js文件進行轉換的工具。

• @babel/preset-env：指定轉換的工做環境

• @babel/polyfill：至關於一個填充，由於babel自己只支持轉換箭頭函數、結構賦值這些語法糖類的語法，而一些新的API或者Promise函數等是沒法轉換的。@babel/polyfill就是解決這個問題的。【注意】babel/polyfill安裝時是--save而不是--save-dev

 

2.3 若是想從es6一鍵轉瀏覽器能夠直接運行的es5, 能夠利用webpack(詳見參考連接2)

• 進入項目，並安裝如下各個依賴

- npm install --save webpack
- npm install --save babel-loader
- npm install --save babel-core
- npm install --save babel-preset-es2015

自從babel升級6.x版本後就分紅了兩個插件，一個是babel-core【終端運行】(若是是node請安裝babel-cli )，一個是babel-preset-es2015

安裝完上述內容以後，須要設置一個.babelrc的文件放在根目錄下，內容爲

{
"presets": ["es2015"]
}

而且在webpack.config.js中配置babel-loader

module.exports = {
    entry: "./js/main.js",
    output:{
        filename: 'bundle.js'

    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: "babel-loader"

        }]

    }
}

配置完成後，就能夠直接在JS文件中使用es6的語法，而後經過webpack命令打包生成，便可