如何在ES6项目中导入我的npm模块？

Question

我有一个npm模块(https://www.npmjs.com/package/squarebook)，它使用webpack和babel loader从src/index.js生成dist/bundle.js。然后我在package.json中指定主文件为index.js(主目录)，该主文件包含以下代码:

module.exports = require('./dist/bundle');

现在我已经通过npm安装了该模块（npm install squarebook），在另一个项目中，我使用gulp browserify和babel这种方式：

import browserify from 'gulp-browserify';
import babelify from 'babelify';

   gulp.task('build_js', function() {
     return gulp.src('src/js/main.js')
      .pipe(browserify({debug:true}))
      .pipe(gulp.dest('dist/js/'));
   });

这个项目在 src/js/main.js 中有什么：

import guestbook from 'squarebook';

我希望能够使用留言簿作为squarebook包中的导出函数，但它只是一个带有proto的空对象。

我缺少了什么或者做错了什么？

- ferflores

---

更详细的信息请参考我的项目，我正在尝试导入squarebook包 https://github.com/ferflores/ferflores.net ，文件位于src/js/main.js，目前它可以工作是因为在squarebook包中我不得不执行window.squarebook = squarebook (https://github.com/ferflores/squarebook/blob/master/src/index.js#L68)，但我不想这样留下它，我希望它成为一个可导入的模块，与ES5/ES6兼容。 - ferflores

Answer 1

您不需要在squarebook包中创建的index.js文件。您的库的主要文件可以是由webpack生成的可分发文件。请阅读webpack文档，了解如何将代码构建为可分发库。您的主文件也可以是应用程序的正常入口点，但在这种情况下，您会强制库的用户使用与您相同的webpack转换器（例如，如果您在库中使用ES6语法，则他们也需要使用Babel）。

编辑： 如果您想直接导入主函数

 var squarebook = require('squarebook');

你需要像这样从你的 index 模块中导出它：

 module.exports = squarebook;

不要使用ES6的export default语句。查看es6console fiddle以了解为什么在从ES5文件导入时使用export default将无法正常工作。

- Matthisk

---

我会稍后尝试，如果有效的话，我会接受这个答案，谢谢！ - ferflores

我已经将dist/bundle.js文件设置为package.json中的主文件，现在当我导入包时，我得到一个带有“default”属性的对象，但是方形包的主函数仍然为空。我猜如果我将主文件（未打包的）设置为主要文件，那么它会起作用，但是我希望它与es5兼容，我还能做或测试什么？ - ferflores

Answer 2

@Matthisk的答案是可行的，但是不使用module.exports并保持export default的解决方案是在我的webpack配置文件中指定库目标（libraryTarget: 'umd'），像这样：

module.exports = {
  entry: {
    'bundle': './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    libraryTarget: 'umd'
  }

这样我就能在我的ES6项目中导入我的模块，并且也可以从ES5模块中导入：

var squarebook = require('squarebook').default;

- ferflores