来来来代码先上

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