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

Question

我有一个 npm 模块(https://www.npmjs.com/package/squarebook)，它使用 webpack 和 babel 加载器从 src/index.js 生成 dist/bundle.js 然后我在我的 package.json 中指定主文件是索引。 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';

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

我错过了什么或做错了什么？

Answer 1

您不需要在 squarebook 包中创建的 index.js 文件。你的库的主文件可能只是 webpack 生成的可分发文件。读入 webpack docs关于如何将代码构建到可分发库中。您的主文件也可以是您应用程序的正常入口点，但在这种情况下，您会强制您的库的用户使用与您相同的 webpack 转换器(例如，如果您在您的库中使用 ES6 语法，他们将需要使用 Babel以及)。

编辑:如果希望能够直接导入main函数

 var squarebook = require('squarebook');

你应该像这样从你的索引模块导出它:

 module.exports = squarebook;

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