Consume library using webpack instead of es6-server to use typescript

[FWeinb]

The first (fixable) issue is that we have to expose the Tone module as window.Tone because Tone is distributed as an UMD module and webpack is using the ES6 export (this can be done using webpack.ProvidePlugin see below).

Another issue I am currently facing is that the dynamic fetching of l18n information here makes it impossible(?) for webpack to extract these files and bundles them into the final applications. My current workaround is to just copy the localisation into the destination manually.

This issue also applies to all other media fiels as all these aren't loaded in a way webpack can recognise them. (See default-resources.ts)

Any idea how this could be solved?

It looks like you are using rollup on http://world.kano.me so there should be a nice way to bundle this library into an application.

This also prevents kano-code (among another #1816) to be used on codesandbox.io which would be a great place to host the examples you are providing.

.babelrc

{
  "presets": [
    ["@babel/preset-env", { "targets": { "browsers": ["chrome 70"] } }],
    ["@babel/preset-typescript"]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread"
  ]
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index'),

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },

  module: {
    rules: [
      { test: /\.(ts|js)x?$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new webpack.ProvidePlugin({
      'window.Tone': 'tone',
      'window.marked': 'marked',
      'window.js_beautify': 'js-beautify'
    })
  ]
};