0

我正在尝试为我常用的反应组件建立一个存储库，然后我可以将其添加到我的项目中component-kit并重用它们，所以像

import MyComponent from 'component-kit/MyComponent';

目前我有以下项目结构：

component-kit/
   src/
     MyComponent/
       index.js
     index.js
   package.json
   webpack.config.js

index.js文件以下列方式导入所有组件：

import('./MyComponent');

然后我使用 webpack 将这些导入中的每一个构建到单独的文件中，这是我的配置，根据此处提供的代码拆分文档

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'dist.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'es2015', 'stage-0', 'react'],
            plugins: ['syntax-dynamic-import']
          }
        }
      }
    ]
  }
};

目前这会输出 2 个文件dist.js，0.dist.js我不知道如何以文件 outputet 具有组件名称的方式设置它，MyComponent.js因此我可以像上面提到的那样包含它。理想情况下，它们不会将 react 包含在它们的构建中，因为它始终存在于父组件中。

4

1 回答 1

1

如果你使用像 JSX 这样的基于 babel 的语言，我认为最好使用 babel 来实现这个目的。
看看这个material-ui npm 脚本。
我认为 Webpack 通常适用于捆绑生产应用程序。如果您坚持使用 webpack，
您可以使用 node 获取文件名fs并动态生成类似This answer的条目。

于 2017-04-05T15:29:54.997 回答