來來來代碼先上

成都創(chuàng)新互聯(lián)公司為您提適合企業(yè)的網(wǎng)站設計?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強的網(wǎng)絡競爭力！結合企業(yè)自身，進行網(wǎng)站設計及把握，最后結合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到成都做網(wǎng)站、成都網(wǎng)站制作， 我們的網(wǎng)頁設計師為您提供的解決方案。

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做轉義

直接執(zhí)行 npm run build 生成result.js

執(zhí)行 node result.js

import * as aliasPerson from "./person.js";

import defaultPerson from "./person.js";

執(zhí)行結構完全一樣

二 使用babel做轉義

取消如下注釋.

執(zhí)行 npm run build 生成result.js

執(zhí)行 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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文題目：webpack與babel解析module.exports差異-創(chuàng)新互聯(lián)
本文URL：http://weahome.cn/article/ihcsi.html