如何在ES6項目中導入我的npm模塊？

我有一個npm模塊（https://www.npmjs.com/package/squarebook），它使用帶有babel loader的webpack從src/index.js生成dist/bundle.js，然後我在我的package.json中指定了主文件是index.js（main目錄），這主要文件有以下代碼：如何在ES6項目中導入我的npm模塊？

module.exports = require('./dist/bundle');

現在我已經安裝了通過NPM模塊（NPM安裝squarebook）在我使用一飲而盡browserify與巴貝爾這樣其他項目：

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中有什麼是：

3210

我期待着能夠使用留言從squarebook包我的導出函數，但它只是原一個空的對象。

我在想什麼或做錯了什麼？

來源

2016-09-23 ferflores

更多的細節，這是在那裏我試圖導入squarebook包的項目https：//開頭的github .com/ferflores/ferflores.net文件是src/js/main.js，目前正在開發中因爲在squarebook包中我不得不做window.squarebook = squarebook（https://github.com/ferflores/squarebook/blob/master/src/index.js#L68），但我不想離開它那樣我希望它是與ES5/ES6兼容的可導入模塊。 – ferflores

@Matthisk答案的作品，但沒有使用module.exports和出口保持默認的解決方案是指定庫目標（libraryTarget：「UMD」）在我的包的WebPack配置文件是這樣的：

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;

來源

2016-09-24 13:22:26 ferflores

您將不需要您在squarebook軟件包上創建的index.js文件。您的庫的主要文件可能只是由webpack生成的可分發文件。請閱讀webpack docs，瞭解如何將代碼構建到可分發的庫中。您的主文件也可能是您應用程序的正常入口點，但在這種情況下，您會強制庫的用戶像使用相同的webpack變換器（例如，如果在庫中使用ES6語法，則需要使用Babel以及）。

編輯： 如果你希望能夠進口的主要功能直接

var squarebook = require('squarebook');

您應該從索引模塊導出這樣的：

module.exports = squarebook;

而不是使用ES6 export default聲明。查看es6console fiddle，瞭解爲什麼當從ES5文件導入時，使用export default將無法正常工作。

來源

2016-09-23 15:01:42 Matthisk

我會稍後嘗試，如果它的作品我會接受這個答案，謝謝！ – ferflores

我在導入包的時候把dist/bundle.js文件作爲主文件放在包json中了我有一個'default'屬性的對象，但是沒有包的主要功能，仍然是空的，我猜如果它將工作，如果我把主（未捆綁）的文件作爲主，它會工作，但我希望它是es5兼容，我還能做什麼或測試？ – ferflores

如何在ES6項目中導入我的npm模塊？

回答

相關問題