Question

在弄清楚如何完全创建和设置要发布用于浏览器环境的npm软件包时遇到一些问题。

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

我在两个项目目录中都通过testpackage将npm link链接到我的测试应用程序中。我的测试应用程序是使用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'

在第二种情况下，代码显然是要通过node运行的，而是直接将其直接加载到浏览器中。我本以为测试应用程序中的webpack + babel转译步骤应该运行此程序，但不是。

我会错过这种设置吗？

Answer 1

最后弄清楚了。第一种方法是正确的。我需要在src目录中创建一个es6 index.js，以导入和导出其他文件。然后babel将其转换为/ dist目录，然后package.json中的main指向/ dist / index。问题是我没有要编译的索引。

适用于使用babel编译的浏览器的npm软件包的index.js

1 个答案: