[canvas] Improve plugin pre-build (#25267) (#25569)

Fixes https://github.com/elastic/kibana/issues/23552

Extends the webpack config used to pre-build `x-pack/plugins/canvas/canvas_plugins_src` so that it does a couple things:
 - use the "browser" and "main" fields when defined by packages, this allows the already transpiled output of packages like `@elastic/eui` to be used rather than rebuilding from source
 - use the `@kbn/babel-preset/webpack_preset` for babel-loader
 - include all errors in the log output when an error occurs
This commit is contained in:
Spencer 2018-11-12 19:35:07 -08:00 committed by GitHub
parent 1593c10bc6
commit 854d1882bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 42 additions and 54 deletions

View file

@ -142,6 +142,7 @@
"apollo-server-hapi": "^1.3.6",
"axios": "^0.18.0",
"babel-core": "^6.26.0",
"babel-polyfill": "6.20.0",
"babel-preset-es2015": "^6.24.1",
"babel-register": "^6.26.0",
"babel-runtime": "^6.26.0",

View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import 'babel-polyfill';
import { elementSpecs } from './index';
elementSpecs.forEach(canvas.register);

View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import 'babel-polyfill';
import { functions } from './index';
functions.forEach(canvas.register);

View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import 'babel-polyfill';
import { functions } from './index';
functions.forEach(canvas.register);

View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import 'babel-polyfill';
import { renderFunctions } from './index';
renderFunctions.forEach(canvas.register);

View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import 'babel-polyfill';
import { typeSpecs } from './index';
typeSpecs.forEach(canvas.register);

View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import 'babel-polyfill';
import { args } from './index';
args.forEach(canvas.register);

View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import 'babel-polyfill';
import { datasourceSpecs } from './index';
datasourceSpecs.forEach(canvas.register);

View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import 'babel-polyfill';
import { modelSpecs } from './index';
modelSpecs.forEach(canvas.register);

View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import 'babel-polyfill';
import { transformSpecs } from './index';
transformSpecs.forEach(canvas.register);

View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import 'babel-polyfill';
import { viewSpecs } from './index';
viewSpecs.forEach(canvas.register);

View file

@ -15,4 +15,5 @@ require('babel-register')({
presets: [require.resolve('@kbn/babel-preset/node_preset')],
});
require('./polyfill');
require('./worker');

View file

@ -0,0 +1,18 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
// taken from kibana/src/setup_node_env/babel_register/polyfill.js
// ...
// `babel-preset-env` looks for and rewrites the following import
// statement into a list of import statements based on the polyfills
// necessary for our target environment (the current version of node)
// but since it does that during compilation, `import 'babel-polyfill'`
// must be in a file that is loaded with `require()` AFTER `babel-register`
// is configured.
//
// This is why we have this single statement in it's own file and require
// it from ./babeled.js
import 'babel-polyfill';

View file

@ -23,6 +23,10 @@ module.exports = {
'functions/common/all': path.join(sourceDir, 'functions/common/register.js'),
'types/all': path.join(sourceDir, 'types/register.js'),
},
// there were problems with the node and web targets since this code is actually
// targetting both the browser and node.js. If there was a hybrid target we'd use
// it, but this seems to work either way.
target: 'webworker',
output: {
@ -33,6 +37,7 @@ module.exports = {
resolve: {
extensions: ['.js', '.json'],
mainFields: ['browser', 'main'],
},
plugins: [
@ -47,8 +52,10 @@ module.exports = {
});
this.plugin('done', function(stats) {
if (stats.compilation.errors && stats.compilation.errors.length && !isWatch)
throw stats.compilation.errors[0];
if (!stats.hasErrors()) return;
const errorMessage = stats.toString('errors-only');
if (isWatch) console.error(errorMessage);
else throw new Error(errorMessage);
});
},
new CopyWebpackPlugin([
@ -62,64 +69,15 @@ module.exports = {
module: {
rules: [
// There's some React 15 propTypes funny business in EUI, this strips out propTypes and fixes it
{
test: /(@elastic[\/\\]eui|moment)[\/\\].*\.js$/,
test: /\.js$/,
exclude: [/node_modules/],
loaders: 'babel-loader',
options: {
babelrc: false,
presets: [
'react',
[
'env',
{
targets: {
node: 'current',
},
},
],
],
plugins: [
'transform-react-remove-prop-types', // specifically this, strips out propTypes
'pegjs-inline-precompile',
'transform-object-rest-spread',
'transform-async-to-generator',
'transform-class-properties',
[
'inline-react-svg',
{
ignorePattern: 'images/*',
svgo: {
plugins: [{ cleanupIDs: false }, { removeViewBox: false }],
},
},
],
],
presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
},
},
{
test: /\.js$/,
loaders: 'babel-loader',
options: {
plugins: [
'transform-object-rest-spread',
'transform-async-to-generator',
'transform-class-properties',
],
presets: [
'react',
[
'env',
{
targets: {
node: 'current',
},
},
],
],
},
exclude: [/node_modules/],
},
{
test: /\.(png|jpg|gif|jpeg|svg)$/,
loaders: ['url-loader'],