Question

我有一个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用作squarebook包中的导出函数，但它只是一个空对象 proto 。

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

Answer 1

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

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

package com.acme;

import java.util.stream.IntStream;
import java.util.stream.Stream;

import static java.util.Comparator.reverseOrder;

public class PrintIt {

    public static void main(String[] args) {
        printSpacesWithStar(10, Order.ASC);
        printSpacesWithStar(10, Order.DESC);
    }

    private static void printSpacesWithStar(int numbers, Order order) {
        Stream<Integer> streamOfInt = IntStream.rangeClosed(1, numbers)
                .boxed();

        switch (order) {
            case ASC:
                streamOfInt
                        .sorted(reverseOrder())
                        .forEach(Test::printingLogic);
                break;
            case DESC:
                streamOfInt
                        .forEach(Test::printingLogic);
                break;
        }
    }

    private static void printingLogic(Integer currentValue) {
        for (int k = 1; k < currentValue; k++) {
            System.out.print(" ");
        }
        System.out.println("*");
    }

    enum Order {
        ASC, DESC;
    }


}

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

 var squarebook = require('squarebook');

而不是使用ES6 module.exports = squarebook;语句。请查看es6console fiddle，了解从ES5文件导入时使用export default无法正常工作的原因。

Answer 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;

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

2 个答案: