Polymer 2.0 provides option for minify html and css in polymer.json while building in Polymer CLI.
https://www.polymer-project.org/2.0/toolbox/build-for-production
but Polymer 1.0 does not provide that option and there is no documentation for that.
How this can be solved?
Polymer CLI works for Polymer 1, 2, and 3. That is, it can also minify Polymer 1 projects (e.g., Polymer 1.x app template). Here's a minimal polymer.json configuration that minifies HTML, CSS, and JavaScript:
{
"builds": [{
"name": "my-build",
"html": {
"minify": true
},
"css": {
"minify": true
},
"js": {
"minify": true
}
}]
}
Related
I changed the output paths in my semantic.json which is working fine. However I would like the following files to be built in ../../static/css (../../static/js):
semantic.css
semantic.js
semantic.min.css
semantic.min.js
What do I have to change in order to achieve this?
File content:
{
"base": "semantic/",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "../static/",
"uncompressed": "../static/components/",
"compressed": "../static/components/",
"themes": "../static/themes/"
},
"clean": "../static/"
},
"permission": false,
"autoInstall": false,
"rtl": false,
"components": [
/* Components come here... */
],
"version": "2.2.13"
}
Changing the output directories in the Semantic.json didn't work for me, but changing it in semantic/tasks/config/defaults.js worked. I don't know why or if that's good, but the files have been created correctly now.
As to your problem with separating CSS and JS:
Here (https://github.com/Semantic-Org/Semantic-UI/issues/2221) it says:
JS and CSS files are not set up to have separate output directories in
the current build system.
As of July 2016 there was no solution yet.
I've configured my "polymer build" (v 2.0) to transpile an ES5 version just for IE 11, but now I need to serve only that version for IE 11 users and the ES6 version for all other browsers. What's the best way to achieve this?
Ideally, I'd like to use just one import in whichever client pages use my custom element and have some logic on the server to dish out the appropriate version, but being a newbie to web components, I don't want roll my own solution (which will probably be nasty) if there's a "right way" of doing it (so far I haven't found it, but I'll keep searching).
Thanks.
You should use a webserver, which is capable of detecting the browsers features.
The Polymer Team itself has released a library for nodeJS, which reads in your polymer.json file and looks in your builds directory and serves the correct build according to the features the browser of the client supports. The server itself supports H2 Push aswell, which is a nice feature.
https://github.com/Polymer/prpl-server-node
This is my builds configuration in polymer.json. It generates a different build for each capability. I cross checked, what versions of browsers support these technologies and added a build for each neccecary combination.
"builds": [{
"name": "none",
"browserCapabilities": [],
"addServiceWorker": true,
"bundle": true,
"swPrecacheConfig": "sw-precache-config.js",
"insertPrefetchLinks": true,
"js": {
"minify": true,
"compile": true
},
"css": {"minify": true},
"html": {"minify": true}
},
{
"name": "noes6",
"browserCapabilities": ["push", "serviceworker"],
"addServiceWorker": true,
"addPushManifest": true,
"swPrecacheConfig": "sw-precache-config.js",
"insertPrefetchLinks": true,
"js": {
"minify": true,
"compile": true
},
"css": {"minify": true},
"html": {"minify": true}
},
{
"name": "nopush",
"browserCapabilities": ["es2015", "serviceworker"],
"addServiceWorker": true,
"swPrecacheConfig": "sw-precache-config.js",
"insertPrefetchLinks": true,
"bundle": true,
"js": {"minify": true},
"css": {"minify": true},
"html": {"minify": true}
},
{
"name": "all",
"browserCapabilities": ["es2015", "push", "serviceworker"],
"addServiceWorker": true,
"addPushManifest": true,
"swPrecacheConfig": "sw-precache-config.js",
"js": {"minify": true},
"css": {"minify": true},
"html": {"minify": true}
}]
And a simple express server, which utilizes the prpl-server library for differential serving (bare in mind, that this is ES6 Syntax):
const prpl = require('prpl-server');
const express = require('express');
const config = require('./build/polymer.json');
const app = express();
app.get('/*', prpl.makeHandler('./build/', config));
app.listen(process.env.PORT || 80);
Context
I've been using a monolithic src tree internally and have recently split it into separate smaller libraries for reuse. Since this is all internal, I have no need for these libraries to produce ES5. I want our webpack 2 apps to be able to consume pure ES2015 libraries.
Problem
The problem is, when I produce a pure ES2015 library, my webpack transpiled app fails with:
Uncaught TypeError: Class constructor RouteConfig cannot be invoked without 'new'
The source of this is:
import {RouteConfig} from '#acme/ui/config'
Sanity check
For verification that I'm not doing anything obviously wrong, I verified:
the library built as ES5 works
the app including the library (with the ES2015 preset added to it) via source alias works
Details
Library .babelrc
{ // produce a pure es2015 build
"presets": [
"es2017",
"es2016",
"stage-0",
"react"
],
"plugins": [
"babel-relay-plugin-loader",
"flow-react-proptypes",
"transform-flow-strip-types",
"lodash",
"transform-runtime"
],
"env": {
"production": {
"presets": [
"react-optimize"
],
"plugins": [
["react-remove-properties", {"properties": ["data-test"]}]
]
}
}
}
Application .babelrc:
{
"presets": [
"es2017",
"es2016",
["es2015", {"modules": false}], // allows webpack2 to interpret ES2015 modules+
"stage-0", // if omitted, this leaves `export Log from './Log'`
"react"
],
"plugins": [
"babel-relay-plugin-loader",
"flow-react-proptypes",
"transform-flow-strip-types",
"lodash",
"transform-runtime",
"react-hot-loader/babel"
],
"env": {
"production": {
"presets": [
"react-optimize"
],
"plugins": [
["react-remove-properties", {"properties": ["data-test"]}]
]
}
}
}
TLDR;
We have many libraries and many apps that are internal and don't need ES5
I want to author both a library and an app in ES2015+.
Each library will create a pure ES2015 build for the private npm package.
I want to take advantage of as much webpack 2 tree shaking/optimization as possible.
Our library works as an ES5 package
Our library works as a source alias to the app with the 2015 preset added to it's .babelrc
Source alias usage for all our libraries is not desirable
Question
What config is needed to get webpack 2 to consume a pure ES2015 library?
It's possible you're excluding the node_modules folder in your babel-loader. If so, you can try modifying the exclude regex.
ie.
test: /\.js$/,
use: [
'babel-loader'
],
exclude: [/.*node_modules((?!folder_name_here).)*$/]
I want to read a json file which is present locally in my system, in my polymer element. Currently i have put the json structure in task property of my element( as a first step).I am using 'dom-repeat' to parse through the json. But still cannot see anything in output.
<ul>
<template is="dom-repeat" items="{{items}}">
<li><span>{{item}}</span></li>
</template>
<template is="dom-repeat" tasks="{{task}}">
<li><span>{{task.task.name}}</span></li>
</template>
</ul>
Above is my !-template-! of the polymer element. Where i am trying to read an array i.e {{items}} and a json i.e {{task}}
Below is the script :
<script>
(function() {
'use strict';
Polymer({
is: 'my-list',
properties: {
items: {
type: Array,
notify: true
},
task:{
type: Array,
value: function () { return []; } // Default value
}
},
ready: function() {
this.items = [
'Responsive Web App boilerplate',
'Iron Elements and Paper Elements',
'End-to-end Build Tooling (including Vulcanize)',
'Unit testing with Web Component Tester',
'Routing with Page.js',
'Offline support with the Platinum Service Worker Elements'
];
this.task=[{
"task": {
"name": "Fan",
"rules": [{
"name": "Check Blades",
"id": "1",
"steps": [{
"name": "Check motor",
"operator": "OR",
"number": "1",
"substeps": [{
"name": "SubStep1",
"function": "code",
"expression": "(FAULT_CODE) == {err05,err07,err06}",
"number": "1",
"timeperiod": "86400000"
}]
}]
}]
}
}];
}
});
})();
I am able to see the array content i.e this.items but not the json contents. COuld anyone tell me where am I going wrong ? Below is the screenshot of the output where you can see the {{items}} but no {{task}} details.
The browser doesn't allow to read files that are locally on your system. The only thing you can do is to provide a file input that allows to choose files using a file picker and then read them from there. You can read them from your local system if the web server runs on your local system and serves that file to clients.
this.task is an array and so you'd need to use a computed binding to access its values.
See the relevant section in the docs for more info on how to do this.
I am getting the below error by eslint.
I have added ecmaFeatures: { "modules": true } in the .eslintrc file as well.
Because you're getting that message, it looks like you've upgraded to ESLint 2.0, which is great! I can see two changes that you'll make to your configuration, though if anything else comes up, it's probably covered under the 2.0 migration guide:
In 2.0, "ecmaFeatures": { "modules": true } has become "parserOptions": { "sourceType": "module" }.
We replaced space-after-keywords with a new rule, keyword-spacing, which was introduced in one of the 2.0 betas. If you were using "space-after-keywords: 2, you can change that to "keyword-spacing": 2 now.
Putting that all together, your .eslintrc for ESLint 2.0 should include something like this:
{
"parserOptions": {
"sourceType": "module"
},
"env": {
"es6": true
},
"rules": {
"keyword-spacing": 2
}
}