webpack与babel解析module.exports差异-创新互联
来来来代码先上
成都创新互联公司为您提适合企业的网站设计 让您的网站在搜索引擎具有高度排名,让您的网站具备超强的网络竞争力!结合企业自身,进行网站设计及把握,最后结合企业文化和具体宗旨等,才能创作出一份性化解决方案。从网站策划到成都做网站、成都网站制作, 我们的网页设计师为您提供的解决方案。js/main.js
import * as aliasPerson from "./person.js"; import defaultPerson from "./person.js"; console.log("alias person is below ..."); console.log(aliasPerson); console.log(aliasPerson.prototype); console.log("default person is below ..."); console.log(defaultPerson); console.log(defaultPerson.prototype);
js/person.js
function Person(){} Person.nickname = "this is a person"; Person.birthday = "1900-01-01"; Person.prototype.eat = function(){}; module.exports = Person;
webpack.config.js
var entryFilePath = "./js/main.js"; var webpackConfig = { 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
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章题目:webpack与babel解析module.exports差异-创新互联
新闻来源:http://myzitong.com/article/ihcsi.html