2. 程式人生 > >使用Webpack ES6轉ES5 實現模組化(import export)

使用Webpack ES6轉ES5 實現模組化(import export)

阿新 • • 發佈：2019-01-08
1.安裝nodejs：開啟nodejs官網https://nodejs.org/en/，點選碩大的綠色Download按鈕，它會根據系統資訊選擇對應版本（.msi檔案）。
  開啟命令提示符執行下列命令（開啟方式：window + r 輸入cmd回車）
  node -v檢視安裝的nodejs版本
  npm -v檢視npm的版本號
  cd定位到目錄，用法：cd + 路徑
  dir列出檔案列表；
  cls清空命令提示符視窗內容
 
  a.使用npm安裝外掛：命令提示符執行npm install <name> [-g] [--save-dev]；

    1) <name>：node外掛名稱。例：npm install gulp-less --save-dev

    2) -g：全域性安裝。將會安裝在C:\Users\Administrator\AppData\Roaming\npm，並且寫入系統環境變數；  
      非全域性安裝：將會安裝在當前定位目錄；  
      全域性安裝可以通過命令列在任何地方呼叫它，本地安裝將安裝在定位目錄的node_modules資料夾下，通過require()呼叫；

    3) --save：將儲存配置資訊至package.json（package.json是nodejs專案配置檔案）；

    4) -dev：儲存至package.json的devDependencies節點，不指定-dev將儲存至dependencies節點；
       一般儲存在dependencies的像這些express/ejs/body-parser等等。

    5) 為什麼要儲存至package.json？因為node外掛包相對來說非常龐大，所以不加入版本管理，將配置資訊寫入package.json並
       將其加入版本管理，其他開發者對應下載即可（命令提示符執行npm install，則會根據package.json下載所有需要的包，
       npm install --production只下載dependencies節點的包）。

  b. 使用npm解除安裝外掛：npm uninstall <name> [-g] [--save-dev]  PS：不要直接刪除本地外掛包

    1) 刪除全部外掛：npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻煩

    2) 藉助rimraf：npm install rimraf -g 用法：rimraf node_modules

  c. 使用npm更新外掛：npm update <name> [-g] [--save-dev]

    1) 更新全部外掛：npm update [--save-dev]

  d. 檢視npm幫助：npm help
 
  e.當前目錄已安裝外掛：npm list
2.安裝webpack到全域性 npm install webpack -g
3.安裝webpack到你的專案中（要切盤到你的目錄下）  npm install webpack --save-dev
4.安裝babel：
  npm install babel-core --save-dev
  npm install babel-loader  --save-dev
  npm install babel-preset-es2015 --save-dev

  npm install babel-plugin-transform-runtime

5.直接了當，上乾貨。先看一下目錄結構

6.建立webpack.config.js檔案

module.exports={
    entry:__dirname + '/src/index.js',
    output:{
        path: __dirname + '/build',
        filename:'[name].bundle.js'
    },
    module:{
        loaders:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query:
                {
                    presets: ['es2015'],
                    plugins: ['transform-runtime']
                }
            }
        ]
    }
}

7.index.js檔案，使用了es6的import功能，匯入模組，實現模組化 
import animal, { say, type as animalType } from './content'
let says = say()
var message = `The ${animalType} says ${says} to ${animal}`
console.log(message)
$('#result').html(message)

8.content.js檔案，export命令除了輸出變數，還可以輸出函式，甚至是類（react的模組基本都是輸出類）
export default 'A cat'
export function say() {
    return 'Hello'
}
export const type = 'dog'

9.package.json 
{
  "name": "es6_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xutongbao",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.5.6"
  },
  "dependencies": {
    "babel-plugin-transform-runtime": "^6.23.0"
  }
}

10.index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
    <div id="result"></div>
    <script src="build/main.bundle.js" ></script>
</body>
</html>
11.main.bundle.js，webpack打包後的檔案 
/******/ (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] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = 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;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


var _content = __webpack_require__(1);

var _content2 = _interopRequireDefault(_content);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var says = (0, _content.say)();
var message = 'The ' + _content.type + ' says ' + says + ' to ' + _content2.default;
console.log(message);
$('#result').html(message);

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.say = say;
exports.default = 'A cat';
function say() {
    return 'Hello';
}
var type = exports.type = 'dog';

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

11.執行結果


相關推薦

使用Webpack ES6轉ES5 實現模組化(import export)

1.安裝nodejs：開啟nodejs官網https://nodejs.org/en/，點選碩大的綠色Download按鈕，它會根據系統資訊選擇對應版本（.msi檔案）。   開啟命令提示符執行下列命令（開啟方式：window + r 輸入cmd回車）   node -v檢

ES6新特性：使用export和import實現模組化

　　在ES6前， 前端就使用RequireJS或者seaJS實現模組化， requireJS是基於AMD規範的模組化庫，  而像seaJS是基於CMD規範的模組化庫，  兩者都是為了為了推廣前端模組化的工具， 更多有關AMD和CMD的區別， 後面參考給了幾個連結；  　　現在ES6自帶了模組化， 也是JS第

JS-export和import實現模組化管理

    JS中經常會用到export和import，以實現程式碼模組化管理。其中：      export：用於對外輸出本模組（一個檔案可以理解為一個模組）變數的介面      im

ES6+轉ES5（webpack+babel、指定多個js檔案、自動注入）

　　接續上篇ES6+轉ES5，本篇將使用webpack和babel將多個不同目錄下指定的多個ES6+語法的js檔案編譯為ES5，並將編譯後的檔案配置注入對應的html檔案。 　　所需環境node、npm、設定淘寶映象請參考上篇進行安裝，地址：https://www.cnblogs.com/puyongsong

Babel安裝在本地並用webstrom由ES6轉Es5

sta 根目錄 es5 技術 png com img ima tro 1進入到根目錄 2安裝babel npm install babel-cli --save-dev 3安裝其他庫 npm install --save-dev babel-preset-env 4創建.

微信小程式-day03-註冊頁面、路由（微信小程式頁面跳轉）、模組化

1.路由 wx.navigateTo    開啟新頁面 wx.redirectTo      頁面重定向 wx.switchTab      切換 Tab

ES6系列_16之模組化操作

ES6的模組化操作主要包括兩個方面。 （1）export :負責進行模組化，也是模組的輸出。 （2）import : 負責把模組引，也是模組的引入操作。 export的用法： export可以讓我們把變數，函式，物件進行模組化，提供外部呼叫介面，讓外部進行引用。先來看個最簡單的例子，把一個變數模組化。

C程式設計｜用函式實現模組化程式設計詳解（一）

目錄 一、為什麼要用函式 使用函式可使程式清晰、精煉、簡單、靈活。 函式就是功能。每一個函式用來實現一個特定的功能。函式名應反映其代表的功能。 在設計

傳統HTML頁面實現模組化載入

對於網站來說很多頁面之間都有著大量的共享模組，如頁頭，頁尾和使用者欄等。對於具備後端檢視引擎的框架來說這些共享都比較容易抽取，如asp.net mvc來說就有統一佈局的MasterPage,@Section等功能可以共享檢視模板功能。但對於HTML就沒這麼幸運了,在html檔案裡並不具備這些功能，所以當你用純

ES6轉ES5，Traceur使用方式

目前各大瀏覽器和開發環境對支援ES6的支援情況參差不齊，在實際專案開發中，我們仍舊不得不降級使用ES5語法以相容各平臺。幸好有幾款工具可以將ES6語法轉換成ES5，讓我們在使用ES6新特性編寫程式碼的同時，不需要考慮具體的相容性情況。 將ES6程式碼轉換成ES5程式碼工

openlayers5.x結合webpack4.x實現模組化引用

一、問題來源分析：openlayers5.x以來採用的是ES6（ECMAScript 6，注：ECMAScript 和 JavaScript 的關係是，前者是後者的規格，後者是前者的一種實現（另外的 ECMAScript 方言還有 Jscript 和 ActionScript

JS語法轉換-ES6轉ES5

1.使用Babel轉碼 　　全域性安裝 npm install -g babel-cli 　　佈局安裝 npm install -g babel-cli --save-dev 　　 Babel的配置檔案是.babelrc，存放在專案的根目錄下。使用Babel的第一步，需要配

BaseAdapter的封裝來實現模組化開發

引子 要在一個手掌大的手機上展示各種豐富的資訊，橫向滑動與上下滑動已經成為了手機應用不可缺少的一部分。對於上下滑動，有一個被小看的神器ListView配合Adapter。為什麼被小看了呢?對比ScrollView來說，ListView不僅能夠實現不同介面的

vue2.0在android5.0白屏， es6轉es5保證瀏覽器相容性

1. 安裝 npm install --save-dev babel-preset-es2015 2. 安裝 npm install --save-dev babel-preset-stage-3 3. 在專案根目錄建立一個.babelrc檔案（ES6轉ES5配置）  裡面內

vue2.0在android5.0白屏， es6轉es5保證瀏覽器兼容性

comment es5 androi tps and art ie8 ports 階段 1. 安裝 npm install --save-dev babel-preset-es2015 2. 安裝 npm install --save-dev babel-preset-st

（3）javascript實現模組化

1.引言       在實現js的模組化之前，我們首先想一下為什麼要實現模組化程式設計呢？實現模組化程式設計有什麼好處呢？或者說實現模組化程式設計我們可以解決什麼樣子的問題呢？如果在看本篇部落格之前你不懂js的作用域鏈，請務必先看js的作用域鏈原理

Flask 用Blueprint實現模組化的應用

在一個大型專案中，肯定會有很多模組組成，比如一個網路管理系統可能有流量運營模組，實時分析模組，故障預警模組等。我們可以利用Flask Blueprint 實現每個模組的功能進行獨立的開發與管理，後

es6中模組化：export和export default的區別

一個頁面中export default只有一個。 demo1.js export str="111111" demo2.js import {str} from 'demo1.j

使用DroidPlugin實現模組化開發（主要說呼叫）

github地址：https://github.com/DroidPluginTeam/DroidPlugin/blob/master/readme_cn.md 關於配置，跟著說明文件配置吧。 關於跳轉呼叫， 使用new Intent(String ActiviyUrl)，你會發現，

selenium實現模組化

在selenium的自動化指令碼中，有許多東西是總是呼叫的，比如登陸，那麼就可以將其模組化，獨立出來，從而可以使自動化指令碼更加簡潔．如下以登陸為例來實現模組化： 現有一個自動化指令碼如下，為驗證是否正常登陸的： test1.py # -*- coding: UTF-8