webpack与babel解析module.exports差异
来来来代码先上
js/main.js
import*asaliasPersonfrom"./person.js";importdefaultPersonfrom"./person.js";console.log("aliaspersonisbelow...");console.log(aliasPerson);console.log(aliasPerson.prototype);console.log("defaultpersonisbelow...");console.log(defaultPerson);console.log(defaultPerson.prototype);
js/person.js
functionPerson(){}Person.nickname="thisisaperson";Person.birthday="1900-01-01";Person.prototype.eat=function(){};module.exports=Person;
webpack.config.js
varentryFilePath="./js/main.js";varwebpackConfig={entry:entryFilePath,output:{filename:"result.js"},module:{//rules:[{test:/\.js$/,loader:'babel-loader'}]}};module.exports=webpackConfig;
.babelrc
{"presets":["es2015","stage-3"],"plugins":[["transform-runtime",{"helpers":false,"polyfill":false,"regenerator":true,"moduleName":"babel-runtime"}]]}
package.json
{"scripts":{"build":"webpack"},"devDependencies":{"babel-core":"^6.26.3","babel-loader":"^7.1.4","babel-plugin-transform-runtime":"^6.23.0","babel-preset-es2015":"^6.24.1","babel-preset-stage-3":"^6.24.1","babel-runtime":"^6.26.0","webpack":"^3.10.0","webpack-dev-server":"^2.9.7"}}
一不使用babel做转义
直接执行 npm run build生成result.js
执行 node result.js
import * as aliasPerson from "./person.js";
import defaultPerson from "./person.js";
执行结构完全一样
二使用babel做转义
取消如下注释.
执行 npm run build生成result.js
执行 node result.js
使用 import * as aliasPerson from "./person.js";
多了一个default属性,并且 aliasPerson.prototype为 undefined
原因如下
import * as aliasPerson from "./person.js";
当引入的 ./person.js模块不为es模块的时候(obj.__esModule === false)
babel会将module.exports所指向的对象的非继承属性遍历并附加到 newObj对象中,
并且 newObj.default = module.exports
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。