导入模块时的Javascript范围

Question

有人可以解释为什么我不能在以下示例中打印external: bar吗？据我所知，导入的函数externalFunction应该添加到全局范围，并且在调用时应该具有与localFunction相同的范围，不是吗？

entry.js

import { f as externalFunction } from './myfunction.js'

function localFunction() {
  console.log('local: ' + foo) // 'local: foo'
  console.log('local: ' + bar) // 'local: bar'
}

foo = 'foo'
var bar = 'bar'

localFunction()
externalFunction()

myfunction.js

export const f = function() {
  console.log('external: ' + foo) // 'foo'
  console.log('external: ' + bar) // 'ReferenceError: bar is not defined'
}

webpack.config.js

const webpack = require('webpack')
const path = require('path')

module.exports = [
  {
    // define the entry points
    entry: {
      viewer: './entry.js'
    },
    // create a sourcemap file alongside the bundle file for easy debugging
    devtool: 'source-map',
    // Define the path and filename for the bundled modules
    output: {
      path: './',
      filename: 'bundle.js'
    },
    module: {
      // Define all the loaders we want to use
      loaders: [
        {
          test: /.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            presets: ['es2015-without-strict']
          }
        }
      ]
    }
  }
];

然后在浏览器中运行它，只需通过标记添加包。