Question

我有一个用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>文件夹合并，但这种方法对我来说似乎不对，而且我必须在工作目录之外创建一个不太实用的临时文件夹。< / p>

有人知道如何使用 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()
    ]
}

Answer 1

所以我使用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);
};

我希望有人会觉得它很有帮助。

Webpack捆绑客户端特定组件

1 个答案: