这次给大家带来使用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;
})]);
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
满天星导航栏特效
select的option叠加怎样处理
react事件绑定this的几种方式
string.prototype.format如何使用字符串拼接
以上就是使用import 和require打包js的详细内容。