metabase 开发环境小记

【1】前端开发环境

    metabase前端采用react等相关框架，前端开发搭建基于yarn的开发环境，在metabase的根目录下运行：yarn run build-hot即可启动。此命令支持前端代码的热更新，但由于前端的代码较多，热更新的速度较慢，所以对其webpack.config.js配置文件进行部分修改,以优化热更新编译速度：

/* eslint-env node */
/* eslint-disable import/no-commonjs */

require("babel-register");
require("babel-polyfill");

var webpack = require('webpack');
var path = require("path");

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
var UnusedFilesWebpackPlugin = require("unused-files-webpack-plugin").default;
var BannerWebpackPlugin = require('banner-webpack-plugin');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin')

var fs = require('fs');

var chevrotain = require("chevrotain");
var allTokens = require("./frontend/src/metabase/lib/expressions/tokens").allTokens;

var SRC_PATH = __dirname + '/frontend/src/metabase';
var LIB_SRC_PATH = __dirname + '/frontend/src/metabase-lib';
var TEST_SUPPORT_PATH = __dirname + '/frontend/test/__support__';
var BUILD_PATH = __dirname + '/resources/frontend_client';

// default NODE_ENV to development
var NODE_ENV = process.env["NODE_ENV"] || "development";

// Babel:
var BABEL_CONFIG = {
    cacheDirectory: process.env.BABEL_DISABLE_CACHE ? null : ".babel_cache"
};

var CSS_CONFIG = {
    localIdentName: NODE_ENV !== "production" ?
        "[name]__[local]___[hash:base64:5]" :
        "[hash:base64:5]",
    url: false, // disabled because we need to use relative url()
    importLoaders: 1
}

var config = module.exports = {
    context: SRC_PATH,

    // output a bundle for the app JS and a bundle for styles
    // eventually we should have multiple (single file) entry points for various pieces of the app to enable code splitting
    entry: {
        "app-main": './app-main.js',
        // "app-public": './app-public.js',
        // "app-embed": './app-embed.js',
        styles: './css/index.css',
    },

    // output to "dist"
    output: {
        path: BUILD_PATH + '/app/dist',
        // NOTE: the filename on disk won't include "?[chunkhash]" but the URL in index.html generated by HtmlWebpackPlugin will:
        filename: '[name].bundle.js?[hash]',
        publicPath: 'app/dist/'
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    { loader: "babel-loader", options: BABEL_CONFIG }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules|\.spec\.js/,
                use: [
                    { loader: "eslint-loader" }
                ]
            },
            {
                test: /\.(eot|woff2?|ttf|svg|png)$/,
                use: [
                    { loader: "file-loader" }
                ]
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        { loader: "css-loader", options: CSS_CONFIG },
                        { loader: "postcss-loader" }
                    ]
                })
            }
            ]
    },
    resolve: {
        extensions: [".webpack.js", ".web.js", ".js", ".jsx", ".css"],
        alias: {
            'metabase':             SRC_PATH,
            'metabase-lib':         LIB_SRC_PATH,
            '__support__':          TEST_SUPPORT_PATH,
            'style':                SRC_PATH + '/css/core/index',
            'ace':                  __dirname + '/node_modules/ace-builds/src-min-noconflict',
        },

    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor'],   
            filename: 'vendor.min.js' ,  //利用浏览器缓存      
            minChunks (module) {
                return module.context && module.context.indexOf('node_modules') >= 0
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({ 
            name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
        }),
        new UnusedFilesWebpackPlugin({
            globOptions: {
                ignore: [
                   "**/types.js",
                    "**/types/*.js",
                    "**/*.spec.*",
                    "**/__support__/*.js",
                    "**/__mocks__/*.js*",
                    "internal/lib/components-node.js"
                ]
            }
        }),
        // Extracts initial CSS into a standard stylesheet that can be loaded in parallel with JavaScript
        // NOTE: the filename on disk won't include "?[chunkhash]" but the URL in index.html generated by HtmlWebpackPlugin will:
        new ExtractTextPlugin({
            filename: '[name].bundle.css?[contenthash]'
        }),
        new HtmlWebpackPlugin({
            filename: '../../index.html',
            chunksSortMode: 'manual',
            chunks: ["manifest","vendor", "styles", "app-main"],
            template: __dirname + '/resources/frontend_client/index_template.html',
            inject: 'head',
            alwaysWriteToDisk: true,
        }),
        // new HtmlWebpackPlugin({
        //     filename: '../../public.html',
        //     chunksSortMode: 'manual',
        //     chunks: ["vendor", "styles", "app-public"],
        //     template: __dirname + '/resources/frontend_client/index_template.html',
        //     inject: 'head',
        //     alwaysWriteToDisk: true,
        // }),
        // new HtmlWebpackPlugin({
        //     filename: '../../embed.html',
        //     chunksSortMode: 'manual',
        //     chunks: ["vendor", "styles", "app-embed"],
        //     template: __dirname + '/resources/frontend_client/index_template.html',
        //     inject: 'head',
        //     alwaysWriteToDisk: true,
        // }),
        new HtmlWebpackHarddiskPlugin({
            outputPath: __dirname + '/resources/frontend_client/app/dist'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(NODE_ENV)
            }
        }),
        new BannerWebpackPlugin({
            chunks: {
                'app-main': {
                    beforeContent: "/*\n* This file is subject to the terms and conditions defined in\n * file 'LICENSE.txt', which is part of this source code package.\n */\n",
                },
                // 'app-public': {
                //     beforeContent: "/*\n* This file is subject to the terms and conditions defined in\n * file 'LICENSE.txt', which is part of this source code package.\n */\n",
                // },
                // 'app-embed': {
                //     beforeContent: "/*\n* This file is subject to the terms and conditions defined in\n * file 'LICENSE-EMBEDDING.txt', which is part of this source code package.\n */\n",
                // },
            }
        }),
    ]
};

if (NODE_ENV === "hot") {
    // suffixing with ".hot" allows us to run both `yarn run build-hot` and `yarn run test` or `yarn run test-watch` simultaneously
    config.output.filename = "[name].hot.bundle.js?[hash]";

    // point the publicPath (inlined in index.html by HtmlWebpackPlugin) to the hot-reloading server
    config.output.publicPath = "http://localhost:8080/" + config.output.publicPath;

    config.module.rules.unshift({
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: [
            // NOTE Atte Keinänen 10/19/17: We are currently sticking to an old version of react-hot-loader
            // because newer versions would require us to upgrade to react-router v4 and possibly deal with
            // asynchronous route issues as well. See https://github.com/gaearon/react-hot-loader/issues/249
            { loader: 'react-hot-loader' },
            { loader: 'babel-loader', options: BABEL_CONFIG }
        ]
    });

    // disable ExtractTextPlugin
    config.module.rules[config.module.rules.length - 1].use = [
        { loader: "style-loader" },
        { loader: "css-loader", options: CSS_CONFIG },
        { loader: "postcss-loader" }
    ]

    config.devServer = {
        hot: true,
        inline: true,
        contentBase: "frontend",
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
        // if webpack doesn't reload UI after code change in development
        // watchOptions: {
        //     aggregateTimeout: 300,
        //     poll: 1000
        // }
        // if you want to reduce stats noise
        // stats: 'minimal' // values: none, errors-only, minimal, normal, verbose
    };

    config.plugins.unshift(
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    );
}

if (NODE_ENV !== "production") {
    // replace minified files with un-minified versions
    for (var name in config.resolve.alias) {
        var minified = config.resolve.alias[name];
        var unminified = minified.replace(/[.-\/]min\b/g, '');
        if (minified !== unminified && fs.existsSync(unminified)) {
            config.resolve.alias[name] = unminified;
        }
    }


    // enable "cheap" source maps in hot or watch mode since re-build speed overhead is < 1 second
    //config.devtool = "cheap-module-source-map";
     config.devtool = "eval-source-map";
    // works with breakpoints
   // config.devtool = "inline-source-map"

    // helps with source maps
    config.output.devtoolModuleFilenameTemplate = '[absolute-resource-path]';
    config.output.pathinfo = true;
} else {
    config.plugins.push(new UglifyJSPlugin({
        uglifyOptions: {
            mangle: {
                // this is required to ensure we don't minify Chevrotain token identifiers
                // https://github.com/SAP/chevrotain/tree/master/examples/parser/minification
                except: allTokens.map(function(currTok) {
                    return chevrotain.tokenName(currTok);
                })
            }
        }
    }))

    config.devtool = "source-map";
}

   前端开发优化主要集中在以下几点：

（1）选择要二次开发的模块和入口，如只编译app-main入口的相关源代码。

（2）原始配置热更新时重新打包所有的依赖包，包括不变的公共依赖包，其实公共依赖的包无需重新打包，新的配置将公共模块的包统一打包至，vendor.min.js中，并且不用hash命名，可充分利用浏览器的缓存特性，并添加manifest打包，主要打包运行时的相关内容，并在HtmlWebpackPlugin中添加"vendor"和"manifest"相关引用，注：部署时请还原webpack.config.js至最初状态。

（3）前端开发时调试代码优化，采用config.devtool = "eval-source-map"源码打包方式，此方式编译速度中等，并且debugger位置准确。

【2】后端开发环境

     metabase后端语言采用clojure，并结合Ring和toucan等开发框架，总体选用Intell IDEA作为开发工具，其相关配置如下：

  （1）在Intell IDEA中添加colure相关插件，如Cursive和Leinigen。

  （2）调试模式变更，将BreakOuts的Suspend配置由All- >Thread，这样即可调试相关断点。

  （3）运行配置，配置Leinigen作为运行配置，Arguments配置为ring server即可。

 通过以上配置，即可进行后端代码的开发与调试。

【3】AWS上部署问题，

      在AWS上部署metabase时，元数据存储采用mysql,执行完mysql脚本之后，启动metabase报错，如下，

   

   原因：启动metabase时，会进行数据库的迁移（migrate），其实如果我们单独执行数据库脚本时，已经无需进行数据库的migrate，故在metabase启动的将migrate的相关代码注释掉即可。