index.js 用于浏览器的 npm 包，使用 babel 进行编译答案

【问题标题】：index.js for npm package for browser transpiled with babelindex.js 用于浏览器的 npm 包，使用 babel 进行编译
【发布时间】：2018-06-23 06:37:17
【问题描述】：

在弄清楚如何完全创建和设置我想发布以在浏览器环境中使用的 npm 包时遇到一些问题。

我相信我遗漏了一些关于如何生成索引文件的信息。

我在两个项目目录中都通过npm link 将testpackage 链接到我的测试应用程序中。我的测试应用程序是使用 webpack 和 babel 设置的，并且是用 es6 编写的，所以使用 import 和 export。

源码是用 es6 写的，通过 babel 转译。以下是 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，但都不起作用。

// 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 转译步骤应该运行它，但它不是。

我缺少这个设置怎么办？

【问题讨论】：

标签： javascript npm ecmascript-6

【解决方案1】：

终于想通了。第一种方法是对的。我需要在 src 目录中创建一个 es6 index.js 来导入和导出其他文件。然后 babel 将其编译到 /dist 目录中，并且 package.json 中的 main 指向 /dist/index。问题是我没有转换索引。

【讨论】：