Question

我正在创建一个新的NPM包。在repo中，有一个examples目录，其中有一些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'，但它当然无法找到包裹，但却失败了。

react-menu如何做到这一点？

Answer 1

好的，我应该更深入地了解webpack文档。

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

我的目录结构如下：

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

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

1 个答案: