I've got a polymer.js 1.x project that I want to bundle to optimize for production use.
My project has several custom elements in /elements directory and lots (~100) dependencies in bower_elements.
It does not use service worker and doesn't have manifest.json file.
I tried following directions published on https://www.polymer-project.org/2.0/toolbox/build-for-production#bundling (the directions are on v2 documentation but there is info it would work for v1 projects too - tried it with polymer-starter-kit and it worked - files were bundled).
The build produces minified html,js,css files but I cannot get it to bundle my code, despite having set bundle: true in polymer.json build section.
My polymer.json contents:
{
"entrypoint": "index.html",
"fragments": [
"elements/**/*"
],
"sources": [
"images/**/*",
"bower.json",
"index.html",
"elements/**/*",
"styles/**/*"
],
"extraDependencies": [
"bower_components/webcomponentsjs/*.js",
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
],
"builds": [
{
"name": "es6-bundled",
"js": {
"minify": true,
"compile": false
},
"css": {
"minify": true
},
"html": {
"minify": true
},
"bundle": true,
"addServiceWorker": false,
"addPushManifest": false,
"preset": "es6-bundled"
}
]
}
Related
I've been using Cypress with Cucumber for a while and somehow for some reason, it's stopped logging anything except 'testRunStarted' and 'testRunFinished' to messages.ndjson.
this is my .cypress-cucumber-preprocessorrc.json:
{
"json": {
"enabled": true,
"output": "cypress/cucumber-json/cucumber-json.json",
"formatter": "cucumber-json-formatter"
},
"html": {
"enabled": true,
"output": "cypress/cucumber-html/cucumber-html.html"
},
"messages": {
"enabled": true,
"output": "cypress/messages.ndjson"
},
"nonGlobalStepDefinitions": true,
"stepDefinitions": [
"cypress/e2e/features/*.js",
"cypress/support/step_definitions/**/*.js"
]
}
I have ran cypress with debugging on and confirmed it's picking up the correct config, and it is writing the start and finish to messages, but nothing else.
{"testRunStarted":{"timestamp":{"seconds":1664439067,"nanos":940000000}}}
{"testRunFinished":{"timestamp":{"seconds":1664439137,"nanos":63000000}}}
Absolutely stumped on this one!
I have a question: Where your step definitions are placed? Is it in the same folder where your feature files exists or they are found in support folder? Wherever it present just use that path in your step_definitions in .cypress-cucumber-preprocessorrc.json.
So your .cypress-cucumber-preprocessorrc.json should look like this if your step definitions are in support folder
{
"json": {
"enabled": true,
"output": "cypress/cucumber-json/cucumber-json.json",
"formatter": "cucumber-json-formatter"
},
"html": {
"enabled": true,
"output": "cypress/cucumber-html/cucumber-html.html"
},
"messages": {
"enabled": true,
"output": "cypress/messages.ndjson"
},
"nonGlobalStepDefinitions": true,
"stepDefinitions":
"cypress/support/step_definitions/**/*{.js,.mjs}"
}
Hope you will get your results.
PATH is an environment variable, not your project folder path.
Run the command echo $PATH in order to see a list of paths that are eligible for you to put the cucumber-json-formatter.exe into.
If you don't want to put this file in your path, you can use the json.formatter property in your config to point at this exe file.
Config to point at the formatter:
https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/json-report.md
Where to find the formatter:
https://github.com/cucumber/json-formatter
I have been trying to determine what has changed doing this update that would cause the icons to no longer render correctly. I do not receive any errors in the browser, but I see that it is no longer trying to load the font file (previously was /packs/media/fonts/element-icons-xxx.woff)
The manifest.json contains an entry for the file:
"media/fonts/element-icons.woff": "/packs/media/fonts/element-icons-313f7dac.woff",
I have compared the generated webpack.config.js and see very few changes:
"output.pathinfo: true" has been removed
""cache": true," has been removed
under ""loader": "sass-loader"" the following has been added under "options":
"sassOptions": {
"includePaths": []
}
under "plugins" a ""logger": {}," has been added above ""pathCache": {},"
The theme is currently being loaded via babel.config.js under plugins:
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
But I have also tried importing it in the main entrypoint with:
import 'element-ui/lib/theme-chalk/index.css';
with the same result.
I have added in the 'resolve-url-loader' as recommended in some posts:
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader'
});
Which places it right above the 'sass-loader':
{
"key": "sass",
"value": {
"test": {},
"use": [
"/Users/tom/LGL_DEV/lgl/node_modules/#rails/webpacker/node_modules/mini-css-extract-plugin/dist/loader.js",
{
"loader": "css-loader",
"options": {
"sourceMap": true,
"importLoaders": 2,
"modules": false
}
},
{
"loader": "postcss-loader",
"options": {
"config": {
"path": "/Users/tom/LGL_DEV/lgl"
},
"sourceMap": true
}
},
{
"loader": "resolve-url-loader"
},
{
"loader": "sass-loader",
"options": {
"sourceMap": true,
"sassOptions": {
"includePaths": []
}
}
}
],
"sideEffects": true,
"exclude": {}
}
},
Thoughts?
Update: I have incrementally updated webpacker to see where this breaks:
4.2.2: element-icons load just fine.
4.3.0: element-icons load just fine.
5.0.0: not loading element-icons.
webpack version didn't change
mini-css-extract-plugin changed from 0.8.2 to 0.9.0
file-loader changed from 4.3.0 to 5.1.0
5.0.1: not loading element-icons.
I am serving static files (client builds) using middleware.json
For client,admin and question admin like this
"files": {
"loopback#static": [
{
"params": "$!../client"
},
{
"paths": [
"/admin"
],
"params": "$!../clientAdmin"
},
{
"paths": [
"/question"
],
"params": "$!../adminQuestion"
}
]
},
I want to add another path like
{
"paths": [
"/sponsor/.*"
],
"params": "$!../client"
}
which means that if the url is localhost:3000/sponsor/google or localhost:3000/sponsor/dell, i need to serve the client file.
How to handle this?
I tried this one,
app.use('/sponsor/:id',loopback.static(path.resolve(__dirname, '../client')));
It loading the path but auto redirecting to localhost:3000.
How to handle this dynamic case?
app.use('/sponsor/:id',loopback.static(path.resolve(__dirname, '../client')));
Worked fine
I am following this React JS Tutorial.
It's throwing some jsx-a11y/anchor-is-valid errors.
I found a hack to add the following code to what I am assuming is a .eslintrc file:
{
"rules": {
"jsx-a11y/anchor-is-valid": [ "error", {
"components": [ "Link" ],
"specialLink": [ "to" ]
}]
}
}
But I have no idea where it is or if I should create it in the src folder. Do I add anything to package.json file?
This can be in the form of an .eslintrc.* file or an eslintConfig field in a package.json file, both of which ESLint will look for and read automatically, or you can specify a configuration file on the command line.
In package.json:
{
"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
"rules": {
"jsx-a11y/anchor-is-valid": [ "error", {
"components": [ "Link" ],
"specialLink": [ "to" ]
}]
}
}
}
This needs to be at root level of the project
Trying to set up some testing in a typescript project. For some reason, though, I'm getting a 404 on the spec file (even though I can see the path is correct). Is there something I'm missing in my Karma configuration file?
module.exports = function(config) {
config.set({
basePath: ".",
frameworks: ["jspm", "jasmine"],
reporters: ["progress"],
browsers: ["PhantomJS"],
files: [
],
proxies: {
"/test/": "/base/test/",
"/src/": "/base/src/"
},
jspm: {
stripExtension: false,
loadFiles: [
"test/**/*.ts"
],
serveFiles: [
"src/**/*.ts"
]
},
preprocessors: {
"**/*.ts": ["typescript"]
},
typescriptPreprocessor: {
options: {
noResolve: false,
module: 'amd'
},
transformPath: function(path) {
return path.replace(/\.ts$/, '.js');
}
}
});
}
Or my config.js file?
System.config({
transpiler: "typescript",
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"typescript": "npm:typescript#1.8.10",
"github:jspm/nodelibs-os#0.1.0": {
"os-browserify": "npm:os-browserify#0.1.2"
},
"npm:os-browserify#0.1.2": {
"os": "github:jspm/nodelibs-os#0.1.0"
},
"npm:typescript#1.8.10": {
"os": "github:jspm/nodelibs-os#0.1.0"
}
}
});
I had the same sort of issue except wasn't using the typescript-preprocessor as I wanted JSPM to handle that.
See my question at Karma + JSPM + Typescript - not found '.ts.js' and the repo at https://github.com/Larchy/karma-jspm-typescript-coverage
Basically added a duplicate package to my jspm config to support karma serving at a higher level
"app": {
"main": "app",
"format": "system",
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
}
}
},
"src/app": {
"main": "app",
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
}
}
}
and added proxies to karma config, as you already have:
proxies : {
"/base/jspm_packages" : "/base/src/jspm_packages"
},