javascript - 在另一个 webpack 项目中使用 webpack 编译库并且没有导入任何内容

Question

假设我有两个项目:

项目-a

export default "test text"

project-a 是使用默认的 webpack 4.0 配置编译的，它采用 /src/index.js 并将其捆绑到 /dist/main.js.

然后我将它保存到我的 github 或我的 npm，以便我将来可以使用它(比如在项目-b 中)。

package.json 看起来像:

{
  "name": "project-a",
  "version": "1.0.0",
  "description": "my project",
  "main": "./dist/main.js",
  "dependencies": {},
  "devDependencies": {
    ...
  },
  "scripts": {
    ...
  },
  "author": "",
  "license": "ISC"
}

---

项目-b

我从运行开始:

npm install mygithub/project-a

然后使用相同的默认 webpack 4.0 配置创建一个 /src/index.js :

import projectDefault from 'project-a'

console.log(projectDefault)

我得到了 {}。尝试 import * as projectA from 'project-a' 产生 {}

我哪里错了？

Answer 1

如果你想编写某种可重用的库，你必须告诉 webpack 这样做。

output: {
  libraryTarget: 'commonjs2',
  library: 'handler',
  filename: 'index.js',
  path: path('build')
},

这是重要的部分。在这里，您告诉 webpack 您希望它构建一个库。

以我的 alexa-skill-template 为例项目。它导出方法 handle。

进一步阅读:

• https://webpack.js.org/configuration/output/#output-librarytarget
• https://webpack.js.org/configuration/output/#output-library