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

Posted 2023-03-08

【中文标题】如何在 ES6 项目中导入我的 npm 模块？

【英文标题】：How can I import my npm module in an ES6 project?

【发布时间】：2017-01-31 17:47:19

【问题描述】：

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

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

【问题讨论】：

有关更多详细信息，这是我尝试导入 squarebook 包 github.com/ferflores/ferflores.net 的项目，该文件是 src/js/main.js ，目前正在工作，因为在 squarebook 包中我必须做 window .squarebook = squarebook (github.com/ferflores/squarebook/blob/master/src/index.js#L68) 但我不想让它成为与 ES5/ES6 兼容的可导入模块。

【参考方案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 将无法正常工作。

【讨论】：

我稍后会尝试，如果它有效我会接受这个答案，谢谢！

当我导入包时，我确实将 dist/bundle.js 文件作为主文件放在包 json 中，我有一个具有“默认”属性的对象，但没有正方形的主要功能包，仍然是空的，我想如果我将主（未捆绑）文件作为主文件它会工作，但我希望它与 es5 兼容，我还能做什么或测试？

【参考方案2】：

@Matthisk 答案有效，但不使用 module.exports 并保持导出默认值的解决方案是在我的包 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;