使用import 和require打包JS

程序员文章站 2022-03-17 11:59:02

...

这次给大家带来使用import 和require打包JS，使用import 和require打包JS的注意事项有哪些，下面就是实战案例，一起来看一下。

前言:

之前使用ES6写代码,webpack打包后上线,一点问题没有,也看过打包后的代码,长的很乱,也没敢看看咋回事,加载后就是能运行!

今天通过个例子理解一下打包前,和打包后的代码!

1.创建文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个 index.html 文件）。接下来我们再创建三个文件:

index.html --放在public文件夹中;
Greeter.js -- 放在app文件夹中;
main.js -- 放在app文件夹中;

此时项目结构如下图所示

项目结构

我们在 index.html 文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为 bundle.js ，之后我们还会详细讲述）。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>sample Project</title>
 </head>
 <body>
  <p id='root'>
  </p>
  <script src="bundle.js"></script>
 </body>
</html>

我们在 Greeter.js 中定义一个返回包含问候信息的 html 元素的函数,并依据CommonJS规范导出这个函数为一个模块：

// Greeter.js
exports.greet= function() {
 var greet = document.createElement('p');
 greet.textContent = "Hi there and greetings!";
 return greet;
};
exports.USER_INFO = "userInfo";

main.js 文件中我们写入下述代码，用以把 Greeter模块返回的节点插入页面。

//main.js 
 let {greeter,USER_INFO} =require('./Greeter.js');
console.log(USER_INFO);
document.querySelector("#root").appendChild(greeter());

使用webpack打包后:

(function(modules){     var installedModules = {};  function webpack_require(moduleId) {
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };
    modules[moduleId].call(module.exports, module, module.exports, webpack_require);
    module.l = true;
    return module.exports;
  }
  webpack_require.m = modules;
  webpack_require.c = installedModules;
  webpack_require.d = function(exports, name, getter) {
    if (!webpack_require.o(exports, name)) {
      Object.defineProperty(exports, name, {
        configurable: false,
        enumerable: true,
        get: getter
      });
    }
  };
  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;
  };
  webpack_require.o = function(object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
  };
  webpack_require.p = "";
  return webpack_require(webpack_require.s = 0);
})
(
[
(function(module, exports, webpack_require) {
  //main.js
  let {
    greeter,
    USER_INFO
  } = webpack_require(1);
  console.log(USER_INFO);
  document.querySelector("#root").appendChild(greeter());
}),
(function(module, exports) {
  // Greeter.js
  exports.greet = function() {
    var greet = document.createElement('p');
    greet.textContent = "Hi there and greetings!";
    return greet;
  };
  exports.USER_INFO = "userInfo";
})
]);

首先最为层是包裹着立即执行函数(加粗的内容),参数是一个数组,数组中每一项是对应的模块,每个模块包裹在 (function(module, exports, webpack_require) {//模块内容 });

立即执行函数运行执行 return webpack_require(webpack_require.s = 0);

也就是执行传入数组中的第一个模块main.js

将运行后的每个模块挂载到installedModules = {}上,当下个需要这个模块直接返回当前模块,不在运行代码块了!

接下来将require改为import看看打包后的如何实现

我们将 Greeter.js的信息改为如下：

// Greeter.js
export default function() {
 var greet = document.createElement('p');
 greet.textContent = "Hi there and greetings!";
 return greet;
};
export const USER_INFO = "userInfo";
main.js 文件中的代码，修改后
//main.js 
import greet,{USER_INFO} from './Greeter.js';
console.log(USER_INFO);
document.querySelector("#root").appendChild(greet());

然后我们再次打包:

(function(modules) {
  var installedModules = {};
  function webpack_require(moduleId) {
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };
    modules[moduleId].call(module.exports, module, module.exports, webpack_require);
    module.l = true;
    return module.exports;
  }
  webpack_require.m = modules;
  webpack_require.c = installedModules;
  webpack_require.d = function(exports, name, getter) {
    if (!webpack_require.o(exports, name)) {
      Object.defineProperty(exports, name, {
        configurable: false,
        enumerable: true,
        get: getter
      });
    }
  };
  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;
  };
  webpack_require.o = function(object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
  };
  webpack_require.p = "";
  return webpack_require(webpack_require.s = 0);
})([(function(module, webpack_exports, webpack_require) {
  "use strict";
  Object.defineProperty(webpack_exports, "esModule", {
    value: true
  });
  var WEBPACK_IMPORTED_MODULE_0Greeter_js = webpack_require(1);
  //main.js
  console.log(WEBPACK_IMPORTED_MODULE_0Greeter_js["a"]);
  document.querySelector("#root").appendChild(Object(WEBPACK_IMPORTED_MODULE_0Greeter_js["b"])());
}),
(function(module, webpack_exports, webpack_require) {
  "use strict";
  webpack_exports["b"] = (function() {
    var greet = document.createElement('p');
    greet.textContent = "Hi there and greetings!";
    return greet;
  });;
  const USER_INFO = "userInfo";
  webpack_exports["a"] = USER_INFO;
})]);

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

使用import 和require打包JS

php使用gzip压缩传输js和css文件的方法

使用grunt合并压缩js和css文件的方法

使用 Node.js 对文本内容分词和关键词抽取

PHP小技巧之JS和CSS优化工具Minify的使用方法

egg.js的基本使用和调用数据库的方法示例

require.js 加载过程与使用方法介绍

js eval函数使用,js对象和字符串互转实例

JS使用百度地图API自动获取地址和经纬度操作示例

js判断变量类型使用什么方法（let和var和const区别）

JS使用Prim算法和Kruskal算法实现最小生成树