編寫一個NPM模塊：要求自己的軟件包作爲依賴項

我正在創建一個新的NPM軟件包。在回購協議中，有一個examples目錄，其中包含一些在本地運行（或最終通過github.io）運行時編譯並提供的javascript。編寫一個NPM模塊：要求自己的軟件包作爲依賴項

該設置類似於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如何做到這一點？

來源

2017-10-04 Good Idea

好的，我應該更深入地瞭解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'

來源

2017-10-04 20:13:13

編寫一個NPM模塊：要求自己的軟件包作爲依賴項

回答

相關問題