程序猿日常

最新推荐文章于 2024-09-11 20:06:40 发布

weixin_33720452

最新推荐文章于 2024-09-11 20:06:40 发布

阅读量255

点赞数

文章标签： webpack 前端运维 ViewUI

原文链接：https://juejin.im/post/5c74b166f265da2dbc599758

版权

2019/2/26

import、require、export、module.exports使用详解

webpack本身维护一套模块系统，这套模块系统兼容了前端历史进程下的模块规范，包括amd,commonjs,es6等，本文主要针对 commonjs和es6规范进行说明。模块化的实现其实就是在最后编译的文件内。自执行函数：

(function(modules){  
    
})([])
复制代码

自执行函数的入参是个数组，这个数组包含了所有的模块，自执行函数体里的逻辑就是处理模块的逻辑。

babel专门用于处理es6转换为es5，当然也包括es6模块语法的转换。
babel和webpack的转换思路差不多，区别在于webpack的原生转换可以多做一步静态，分析，使用tree-shaking技术 babel能提前将es6的import等模块关键字转换为commonjs的规范。

es6的导出模块方法有：
 export default 123;
 export const a = 1;
 const b = 2;
 const c = 3;
 export {b, c};
复制代码

babel会将这些统统转换为commonjs的exprots。

exports.default = 123;
exports.a = 1;
exports.b = 2;
exports.c = 3;
exports._esModule = true;
复制代码

babel将模块导出的逻辑非常简单，将所有的输出都赋值exports，并带上一个_esModule表明这个由es6转换来的commonjs输出。
对于最常见的

import a from './a.js'
复制代码

在es6中这个行代码的本意是想去引入一个es6模块中的default输出。

修改Element-ui源码自动刷新配置方法：

import ElementUI from './../node_modules/element-ui/src/index.js';  
webpack.base.config.js文件修改babel-loader配置添加：
resolve('node_modules/element-ui')
"transform-vue-jsx",
"transform-es2015-modules-commonjs"都加上前缀babel-plugin-
复制代码