Question

源代码是用ES6编写的，并使用babel和webpack转换为ES5，它看起来像这样：

的src / 2.js

export default {
   ...
}

的src / 1.js

import 2 from './2.js'
export default {
    ...
}

1.js是webpack的主要入口脚本。这是webpack配置：

var webpack = require('webpack');
var path = require('path');

module.exports = {
  'entry': './src/1.js',
  'module': {
    'loaders': [{
      'test': /\.js$/,
      'exclude': /node_modules/,
      'loader': 'react-hot-loader/webpack'
    }, {
      'test': /\.js$/,
      'exclude': /node_modules/,
      'loader': 'babel-loader'
    }]
  },
  'output': {
    'path': path.resolve(__dirname, './dist'),
    'publicPath': '/',
    'filename': 'index.js'
  }
}

然后将ES5转换文件index.js发布为npm模块，例如'example_module'。

现在，我在另一个应用程序中执行：

import exampleModule from `example-module`;
console.log(exampleModule)  // <-- empty object

尝试导入模块时，我得到一个空对象。

我似乎理解（不确定）已转换的文件是在本机ES5环境中的脚本标记内使用，并且无法在ES6代码中导入。

问题是，我应该如何调整构建过程，以便模块可以在ES5和ES6环境中使用？

Answer 1

当您import exampleModule from 'example-module';默认查看node_modules/项目的different-app文件夹时。

您有两种可能性：

使用webpack和aliases告诉webpack从另一个绝对文件夹中获取example-module。
将example-module与您最喜爱的软件包管理器（yarn / npm）关联到您的node_modules文件夹。

我个人会选择＃2。

从转换的ES6代码导入时获取空对象

1 个答案: