Question

我正试图将ReactJS组件引入非ReactJS站点。我创建了一个项目，该项目将我的组件捆绑在一起并最小化（based on this）。

我可以使用此功能，但这意味着我的构建文件夹中充满了单个JS文件。我想在其中定义某种文件夹结构，而不必为每个组件定义一个条目。

下面是我编写Webpack.config.js文件的尝试

尝试1：

entry: {
    ComponentOne : './src/components/export/ComponentOne/control/ComponentOne.jsx',
    ComponentTwo : './src/components/export/ComponentTwo/control/ComponentTwo.jsx',
},

output: {
    libraryTarget: 'var',
    library: '[name]',
    path: path.resolve(__dirname, './build'),
    filename: '[name].js',
},

这种尝试意味着我将不得不为每个要导出的组件添加一个条目，并且我的build文件夹将充满文件，并且我希望有某种文件结构。

尝试2：

entry: {
    '/ComponentOne/ComponentOne' : './src/components/export/ComponentOne/control/ComponentOne.jsx',
    '/ComponentTwo/ComponentTwo' : './src/components/export/ComponentTwo/control/ComponentTwo.jsx'
}, 

output: {
    libraryTarget: 'var',
    library: '[name]',
    path: path.resolve(__dirname, './build'),
    filename: '[name].js',
},

这种尝试将帮助我构造文件，但再次为每个组件定义一个条目，然后在导出的JS文件中导致错误，因为变量名变为：

var /ComponentOne/ComponentOne =

尝试3：

entry: glob_entries(path.resolve(__dirname, './src/components/export/**/control/*.jsx')),

output: {
    libraryTarget: 'var',
    library: '[name]',
    path: path.resolve(__dirname, './build'),
    filename: '[name].js',
},

使用'webpack-glob-entries'解决了我不必定义每个条目的问题，但是我遇到了同样的问题，即构建文件只是充满了没有文件结构的单个JS文件。

我希望我的构建文件保留组件的文件结构，但仍然能够使用类似于“ webpack-glob-entries”的东西来不必定义每个条目。

ReactJS项目，该项目输出要在非ReactJS站点中使用的组件

0 个答案: