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

Question

I'm creating a new NPM package. Within the repo, there's an examples directory with some javascript that gets compiled and served when running locally (or, eventually via github.io).

The setup is similar to react-menu . If you look inside any of the javascript files in that examples directory, you'll see that they require the package as if it had just been installed with npm install react-menu :

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

But, it's not listed in any of the dependencies in package.json.

I know I can require my own module with something like import myThing from '../../../index.js' , but I'd rather not need to worry about all of the relative directories. I tried import myThing from 'my-thing' , but it of course couldn't find the package, and failed.

How is react-menu doing this?

Answer 1

Ok, I should have looked a little deeper into the webpack docs.

tl;dr - The solution is resolve configuration.

My directories are structured like this:

.
├── 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

Just adding resolve configuration to my webpack.config.examples.js did the trick. Here's the whole file, just for reference:

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'],
            },
        ],
    },
}

So now, when I am working anywhere within the examples app, I can just use:

import myThing from 'my-package'