JavaScript系列文章:React总结之Webpack模块组织
Posted liuhe688
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript系列文章:React总结之Webpack模块组织相关的知识,希望对你有一定的参考价值。
现代前端开发离不开打包工具,以Webpack为代表的打包工具已经成为日常开发必备的工具,以React技术栈为例,我们ES6形式的源代码,需要经过Webpack和Babel处理,才能生成发布版文件,在浏览器中运行。今天就结合React来梳理一下Webpack打包时模块的组织结构,先给定下面一个简单的应用示例:
import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import {greet} from ‘./utils‘;
const App = <h1>{greet(‘scott‘)}</h1>;
ReactDOM.render(App, document.getElementById(‘root‘));
代码中的utils
模块如下:
export function greet(name) {
return `hello ${name}`;
}
如果编译该示例代码,由于要将第三方库一起打包,最终生成的目标代码会比较多,所以我们先在webpack.config.prod.js
中将React
和ReactDOM
配置为externals
,不将它们编译到目标代码中,而是在运行时直接从外部取值。配置如下:
let appConfig = {
entry: ‘./src/index.js‘,
externals: {
‘react‘: ‘React‘,
‘react-dom‘: ‘ReactDOM‘,
},
output: {
path: ‘./dist‘,
filename: ‘index.js‘
},
module: {
loaders: [
{
test: /.js$/,
exclude: /node_modules/,
loader: ‘babel-loader‘
}
]
},
};
运行webpack,生成的目标代码如下:
(function (modules) {
// 存放已加载的模块
var installedModules = {};
// 加载函数
function __webpack_require__(moduleId) {
// 如果该模块已被加载 直接返回module.exports
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
var module = installedModules[moduleId] = {
exports: {},
id: moduleId,
loaded: false
};
// 调用模块函数 加载相应的模块
// 参数是(module, exports[, __webpack_require__])
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 标记该模块已被加载
module.loaded = true;
// 最后也返回exports
return module.exports;
}
// 暴露modules和installedModules对象
__webpack_require__.m = modules;
__webpack_require__.c = installedModules;
// __webpack_public_path__
__webpack_require__.p = "";
// 加载主模块
return __webpack_require__(0);
})
/* 以下是模块列表 作为参数被加载 */
([
/* 0 主模块 */
(function (module, exports, __webpack_require__) {
‘use strict‘;
// 取索引为1的React模块
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
// 取索引为2的ReactDOM模块
var _reactDom = __webpack_require__(2);
var _reactDom2 = _interopRequireDefault(_reactDom);
// 取索引为3的utils模块
var _utils = __webpack_require__(3);
// 模块取值 不包含__esModule:true的是默认导出
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
// 开始渲染视图
var App = _react2.default.createElement(
‘h1‘,
null,
(0, _utils.greet)(‘scott‘)
);
_reactDom2.default.render(App, document.getElementById(‘root‘));
}),
/* 1 React模块 */
(function (module, exports) {
module.exports = React;
}),
/* 2 ReactDOM模块 */
(function (module, exports) {
module.exports = ReactDOM;
}),
/* 3 utils模块 */
(function (module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.greet = greet;
function greet(name) {
return "hello " + name;
}
})
]);
上面就是基本的模块加载机制。其实,有了externals
配置,我们也可以不在代码中引入React
和React-DOM
,下面稍微修改一下代码:
import {greet} from ‘./utils‘;
const App = <h1>{greet(‘scott‘)}</h1>;
ReactDOM.render(App, document.getElementById(‘root‘));
转译后的代码如下:
(function (modules) {
// ...
})
/* 以下是模块列表 作为参数被加载 */
([
/* 0 主模块 */
(function (module, exports, __webpack_require__) {
‘use strict‘;
// 取索引为1的utils模块
var _utils = __webpack_require__(1);
// 开始渲染视图
var App = React.createElement(
‘h1‘,
null,
(0, _utils.greet)(‘scott‘)
);
ReactDOM.render(App, document.getElementById(‘root‘));
}),
/* 1 utils模块 */
(function (module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.greet = greet;
function greet(name) {
return "hello " + name;
}
})
]);
可以看到,代码清晰了不少,主模块中直接调用React.createElement()
来创建虚拟DOM对象,最后调用ReactDOM.render()
方法来渲染真实的DOM结点。访问下面的入口文件,我们就可以看到程序运行的结果:
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="index.js"></script>
</body>
</html>
以上是关于JavaScript系列文章:React总结之Webpack模块组织的主要内容,如果未能解决你的问题,请参考以下文章