Babel Brunch doesn't seems to compile @polymer/lit-element module

263 Views Asked by At

I'm trying to integrate Lit-element into brunch. However, it seems like Babel plugin doesn't try to compile the lit-element module into the output, as it still use the original ES6 syntax of import / export.

Here's my brunch config : `

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      // joinTo: 'js/app.js'
      joinTo: {
        'js/app.js': [
          /^node_modules/,
          /\app.js$/
        ],
        'js/editor.js': [
          /\editor.js$/
        ],
        'js/select.js': [
          /select.js$/,
        ]
      }
    },
    stylesheets: {
      joinTo: 'css/app.css',
      order: {
        after: ['../priv/static/css/app.scss'] // concat app.css last
      }
    },
    templates: {
      joinTo: 'js/app.js'
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to '/web/static/assets'. Files in this directory
    // will be copied to `paths.public`, which is 'priv/static' by default.
    assets: /^(web\/static\/assets)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      'static', 'css', 'js', 'vendor'
    ],

    // Where to compile files to
    public: '../priv/static'
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
    },
    sass: {
      mode: 'native'
    },
    uglify: {
      mangle: false,
      compress: {
        global_defs: {
          DEBUG: false
        }
      }
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true
  }
}

Here is my app.js code

import {LitElement, html} from '@polymer/lit-element'

function autoComplete(options){ ... }

export var App = {
   autoComplete
}

And last is the compiled code, along with console log :

...
require.register("@polymer/lit-element/lit-element.js", function(exports, require, module) {
  require = __makeRelativeRequire(require, {}, "@polymer/lit-element");
  (function() {
    import { PropertiesMixin } from '@polymer/polymer/lib/mixins/properties-mixin.js';
    // "Uncaught SyntaxError: Unexpected token {" on above line
import { camelToDashCase } from '@polymer/polymer/lib/utils/case-map.js';
import { render } from 'lit-html/lib/shady-render.js';
export { html, svg } from 'lit-html/lib/lit-extended.js';
...
0

There are 0 best solutions below