使用babel轉譯的瀏覽器的npm軟件包的index.js

Question

在弄清楚如何完全創建和設置要發布用於瀏覽器環境的npm軟件包時遇到一些問題。

我相信我缺少有關如何生成索引文件的信息。

我有testpackage鏈接到通過我的測試應用程序npm link在這兩個項目目錄。 我的測試應用程序是使用webpack和babel設置的，並且是用es6編寫的，因此使用import和export 。

源代碼用es6編寫，並通過babel進行轉譯。 這是帶有build命令的package.json的相關部分：

{
  "name": "testpackage",
  "main": "index.js",
  "scripts": {
    "build": "babel src --out-dir dist",
    "lint": "eslint ."
  },
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  }
}

我嘗試了兩種創建index.js文件的方法，一種是通過es6， module.exports一種是module.exports但是都沒有用。

// es6 index.js in testpackage
import store from './dist/store';
import attach from './dist/attach';

export {store, attach};

-

// index.js with modules.exports
const path = require('path');

module.exports = {
  store: require(path.resolve(__dirname, './dist/store')),
  attach: require(path.resolve(__dirname, './dist/attach'))
}

在這種es6第一種情況下，我將testpackage導入的測試應用程序找不到dist 。

Module not found: Error: Can't resolve 'dist/store' in '/usr/local/apps/testpackage'

在第二種情況下，代碼顯然是要通過節點運行的，而是直接將其直接加載到瀏覽器中。 我以為測試應用程序中的webpack + babel轉譯步驟應該運行此程序，但不是。

我會錯過這種設置嗎？

Answer 1

終於明白了。 第一種方法是正確的。 我需要在src目錄中創建一個es6 index.js，以導入和導出其他文件。 然后babel將其轉換到/ dist目錄，然后package.json中的main指向/ dist / index。 問題是我沒有要轉換的索引。