gpt4 book ai didi

javascript - Webpack 捆绑客户端特定组件

转载 作者:行者123 更新时间:2023-11-29 23:54:28 25 4
gpt4 key购买 nike

我有一个用 React.js 制作的产品(比如 CRM),我想将其分发给我的许多客户,但带有特定于客户的组件(覆盖通用组件)。

主要代码库的源文件夹结构如下所示:

...
/src
├── components
│   ├── Sidebar
│   ├── Navbar
│   ├── Buttons
│   ├── Chart
│   └── __tests__
├── containers
│   ├── About
│   ├── App
│   ├── Chat
│   ├── ...
├── helpers
├── redux
│   ...
├── theme
| ...
└── vendor
...
/custom-src
├── clientA
│   ├── components
│   ├── containers
│   └── theme
└── clientB
└── components


...

但是,每个客户都希望为他们的 CRM 定制设计组件,例如定制 Navbar , 定制 Sidebar等。+ 自定义用户界面 theme (CSS)。

我不想拥有多个代码库,但我也不想为每个客户端分发相同的捆绑代码,这些代码也将包含其他客户端的自定义组件。

假设我有 clientA .他有一些定制组件(覆盖通用组件)、定制容器和特定主题。直到现在我都在使用 bash 脚本来合并 /src文件夹 /custom-src/<client>文件夹,但这种方法对我来说似乎不合适,而且我必须在工作目录之外创建临时文件夹,这不太实用。

有人知道如何使用我已经用于代码捆绑的 webpack 来做到这一点吗?

我当前的 webpack 配置如下所示:

{
devtool: 'inline-source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
'./src/theme/loader!./webpack/styles.js',
'font-awesome-webpack!./src/theme/font-awesome.config.js',
'./src/client.js'
]
},
output: {
path: assetsPath,
filename: '[name]-[hash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'http://' + host + ':' + port + '/dist/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']
},
{test: /\.json$/, loader: 'json-loader'},
{
test: /\.less$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap'
},
{
test: /\.scss$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
},
{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"},
{
test: webpackIsomorphicToolsPlugin.regular_expression('images'),
loader: 'url-loader?limit=10240&name=[hash:6].[ext]'
}
]
},
progress: true,
resolve: {
modulesDirectories: [
'src',
'node_modules'
],
extensions: ['', '.json', '.js', '.jsx']
},
plugins: [
// hot reload
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/webpack-stats\.json$/),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: true
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
webpackIsomorphicToolsPlugin.development()
]
}

最佳答案

所以我使用 webpack 的 resolve.alias 功能解决了这个问题,并动态添加了文件名。这是代码:

// webpack.config.js
let variation = require('./variation')("clientA");
...
let alias = Object.assign(variation, {
"components" : path.resolve(__dirname, '../src/components'),
"config" : path.resolve(__dirname, '../src/config'),
"containers" : path.resolve(__dirname, '../src/containers'),
"helpers" : path.resolve(__dirname, '../src/helpers'),
"theme" : path.resolve(__dirname, '../src/theme'),
"utils" : path.resolve(__dirname, '../src/utils'),
"vendor" : path.resolve(__dirname, '../src/vendor')
});
...
module.exports = {
...
resolve: {
...
alias: alias,
...
},
...
}

.

// variation.js
const fs = require('fs');
const path = require('path');

const walkSync = function (dir, filelist, base) {
const files = fs.readdirSync(dir);
const extension = /\.(js|jsx)$/i;
filelist = filelist || {};
files.forEach(function (file) {
const dirname = dir.replace(base, '').substr(1);
const fullname = dir + '/' + file;
const filename = file.replace(/(.*)\.[^.]+$/, '$1');

if (fs.statSync(dir + '/' + file).isDirectory()) {
filelist = walkSync(dir + '/' + file, filelist, base);
} else {
if (extension.test(file)) {
filelist[dirname + '/' + filename] = fullname;
} else {
filelist[dirname + '/' + file] = fullname;
}

}
});
return filelist;
};


module.exports = function(variation){
const dirname = path.resolve(__dirname, '../custom/' + variation);
const aliasComponents = walkSync(dirname + "/components", {}, dirname);
const aliasContainers = walkSync(dirname + "/containers", {}, dirname);


return Object.assign({}, aliasComponents, aliasContainers);
};

我希望有人会觉得它有用。

关于javascript - Webpack 捆绑客户端特定组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42055372/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com