【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的相关代码注释掉即可。