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

我有一个npm模块（），它使用带有babel loader的webpack从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/'));
   });

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

另一个项目在src/js/main.js中的内容是：

import guestbook from 'squarebook';

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

---

我遗漏了什么或做错了什么？

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

编辑： 如果希望能够直接导入主函数

 var squarebook = require('squarebook');

您应从索引模块中导出它，如下所示：

 module.exports = squarebook;

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

---

而不是使用ES6

export default

语句。查看以了解从ES5文件导入时，为什么使用导出默认值不能正确工作。

@Matthisk answer可以工作，但不使用module.exports并保持导出默认值的解决方案是在我的软件包网页包配置文件中指定库目标（libraryTarget:'umd'），如下所示：

 module.exports = squarebook;

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

通过这种方式，我可以在我的ES6项目中导入我的模块，它也可以通过以下方式从ES5模块导入：

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/'));
   });

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

---

关于更多细节，这是我试图导入squarebook包的项目，文件是src/js/main.js，目前正在工作，因为在squarebook包中我必须执行window.squarebook=squarebook（）但我不想让它像这样，我希望它是一个与ES5/ES6兼容的可导入模块。如果它能工作，我会稍后再试。我会接受这个答案，谢谢！我确实将dist/bundle.js文件作为包json中的主文件，现在当我导入包时，我有一个带有“default”属性的对象，但没有square包的主功能，仍然为空，我想如果我将主（未绑定）文件作为主文件，它会工作，但我希望它与es5兼容，我还能做什么或测试什么？