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差异-创新互联
网页URL：http://cdkjz.cn/article/ihcsi.html