编写NPM模块：需要自己的软件包作为依赖项

Question

我正在创建一个新的NPM软件包。 在存储库中，有一个examples目录，其中包含一些javascript，这些javascript在本地运行时（或最终通过github.io）被编译并提供服务。

设置类似于react-menu 。 如果您查看该示例目录中的所有javascript文件，您将看到它们需要该软件包，就好像它是使用npm install react-menu ：

import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';

但是，未在package.json的任何依赖项中列出。

我知道我可以使用诸如import myThing from '../../../index.js'类的模块，但是我不需要担心所有相对目录。 我尝试import myThing from 'my-thing' ，但是它当然找不到包，但失败了。

反应菜单如何执行此操作？

Answer 1

好的，我应该对webpack文档进行更深入的研究。

tl; dr-解决方案是解决配置。

我的目录结构如下：

.
├── LICENSE.md
├── README.md
├── examples
│   ├── bundle.js
│   ├── index.html
│   ├── server.js
│   └── src
│       ├── components
│       │   ├── App.js
│       │   └── examples
│       │       └── ExampleOne.js
│       └── index.js
├── index.js
├── package-lock.json
├── package.json
├── src
│   └── index.js
├── test
├── webpack.config.js
└── webpack.examples.config.js

只需将解析配置添加到我的webpack.config.examples.js即可达到目的。 这是整个文件，仅供参考：

const webpack = require('webpack')
const path = require('path')

module.exports = {
    entry: [
        'react-hot-loader/patch',
        'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
        './examples/src/index.js',
    ],

    output: {
        path: path.resolve(__dirname, 'examples'),
        publicPath: '/',
        filename: 'bundle.js',
        sourceMapFilename: 'bundle.js.map',
    },

    resolve: {
        alias: {
            'my-package': path.resolve(__dirname, 'src'),
        },
    },

    devtool: 'eval-source-map',

    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
    ],

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
        ],
    },
}

所以现在，当我在示例应用程序中的任何地方工作时，我都可以使用：

import myThing from 'my-package'