首页 文章

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

提问于
浏览 次
3

我有一个npm模块（https://www.npmjs.com/package/squarebook），它使用带有babel加载器的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/'));
   });

这个其他项目在src / js / main.js中的含义是：

import guestbook from 'squarebook';

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

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

npm gulp webpack ecmascript-6 babeljs

2 回答

  • 1

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

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

    var squarebook = require('squarebook');

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

    module.exports = squarebook;

    而不是使用ES6 export default 语句 . 查看es6console fiddle以了解从ES5文件导入时使用 export default 无法正常工作的原因 .

    回复于
  • 0

    @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;
    回复于

相关问题