Clearly I'm missing something here, I'm trying to prevent caching using assets-webpack-plugin but I seem to have trouble understanding their documentation Here's what I did:
My Config
...
import assetPlugin from 'assets-webpack-plugin';
...
...
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.[hash].js'
},
...
plugins: [
new assetPlugin(),
...
That successfully generates a file in my root called webpack-assets.json which contains:
{"main":{"js":"/bundle.dbe7d464b6bdec429d82.js"}}
In their documentation the only example they give on how to even generate anything in the HTML template looks like this:
new AssetsPlugin({includeManifest: 'manifest'})
// assets.json:
// {entries: {manifest: {js: `hashed_manifest.js`, text: 'function(modules)...'}}}
//
// Your html template:
// <script>
// {assets.entries.manifest.text}
// </script>
which I take it to mean, using my generated file: {webpack-assets.main.js}
So I add this in my HTML template:
...
<body>
<div id="app" ></div>
{webpack-assets.main.js}
...
I even tried with the commented out:
...
// {webpack-assets.main.js}
...
Curly brackets don't get replaced with anything so the HTML page just looks like .
{webpack-assets.main.js}
Clearly I'm missing something here that documentation, I'm guessing, assumed I knew already or I completely missed the ball on this.
Related
I hava a laravel project, there is a README.md in the root directory. I can see the render result after pushing to GitHub, but I want to render markdown document in the local development browser.
I am trying two ways:
Read file from markdown file
convert markdown file to html with something like Webpack
Who can give a demo for this?
Since the mail blade templates parse markdown, you can use a similar approach to layout.blade.php which uses Illuminate\Mail\Markdown::parse.
In your template, such as welcome.blade.php, add this:
{{ Illuminate\Mail\Markdown::parse(file_get_contents(base_path() . '/README.md')) }}
Here is a Laravel Mix / Webpack solution, convert markdown file to html, and required in Vue.js, then show it with v-html.
First add markdown-loader
yarn add markdown-loader html-loader
Add config in webpack.mix.js, Laravel Mix can add custom config of Webpack.
mix.webpackConfig({
module: {
rules: [{
test: /\.md$/,
use: ["html-loader", "markdown-loader"],
}]
}
});
Considering README.md is in the root of Project, add a alias in webpack.mix.js
mix.alias({
'#': '/resources/js',
'#root': '/',
});
Now we can use a vue component to show the README.md at the root directory.
<script>
const readme = require('#root/README.md')
export default {
data() {
return {
readme: ""
}
},
created() {
this.readme = readme
}
}
</script>
<template>
<div class="container" ref="container" v-html="readme" />
</template>
I have a strange problem which may be related toe tree-shaking. I build a sapper app and in my rollup config, I use the svelte-preprocess package and configure it like this:
const preprocessOptions = {
scss: {
data: `#import '${join(process.cwd(), "src/styles/main.scss")}';`,
includePaths: ["node_modules", "src"],
},
postcss: {
plugins: [
require("autoprefixer"),
require("cssnano")({
preset: "default",
}),
],
minimize: !isDevelopment,
sourceMap: isDevelopment,
},
};
Via the scss plugin I copy the global stylesheet main.scss. All of the styles out of it seem to get applied, except for the styles of the body. Somehow these get ignored, because when I check the body styles in the dev console, it is empty. Can't you access the body in Sapper or is there maybe a special way to do this?
The problem is that with Sapper the body is part of the template.html file. That means there's no component with a body element. Svelte will remove styles that are not used in your component unless they are explicitly marked as global. The global preprocessor can help with this. I think in your case I would just get the bundler to create a separate css file for the template.html and include it explicitly like the global.css:
...
%sapper.base%
<link rel='stylesheet' href='global.css'>
...
Researching the error,
"EXCEPTION: TypeError: tagDef.requireExtraParent is not a function"
and it actually returns 0 results on Google.
Background:
site works fine on Chrome and Safari. haven't tested IE yet. whole separate nightmare there.
error is only for Firefox (seems all versions. Currently on 45 though)
I'm converting from TypeScript down to ES5 using System, following along with the Angular quickstart
On a mac if that matters
Angular2, beta 9
The site is very basic. I've removed all possible complications and it appears that the error is just in bootstrapping itself. Perhaps a missing polyfill?
index.html
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'js': {
defaultExtension: 'js'
}
}
});
System.import('js/main')
.then(null, console.error.bind(console));
main.ts (entry point)
/// <reference path="../../node_modules/angular2/typings/browser.d.ts" />
import {HTTP_PROVIDERS} from 'angular2/http';
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app/components/app';
import 'rxjs/Rx'
bootstrap(AppComponent, [HTTP_PROVIDERS]); // if i comment this out, the error disappears indicating that it lives somewhere in app.ts.
app.ts
import {Component} from 'angular2/core';
#Component({
selector: "myapp",
templateUrl: "templates/app.html",
directives: [],
providers: []
})
export class AppComponent {}
What have I tried
Adding some additional polyfills, like html_parser which appears to be where the requireExtraParent method is defined.
<script type="text/javascript" src="dist/lib/html_parser.js"></script>
Eliminate any compilation/transpiling errors.
Digging so deep that Google can't even find anything.
Your solution is spoton
<script type="text/javascript" src="dist/lib/html_parser.js"></script>
The problem was that I was using a reserved word in Angular as a tag (watch).
<services></services>
<collage></collage>
<watch></watch> <== problem
<collage></collage>
changing it to this works:
<services></services>
<collage></collage>
<watchit></watchit> <== works fine
<collage></collage>
this was impossible to debug. i had to go line by line commenting things out until eventually i figured out it was in the html, and eventually which line in particular introduced the problem.
posting only so if someone else hits this, they don't go so crazy.
I'm currently working on an Aurelia project (web framework like Angular2).
I followed the guide on their github account but encountered a problem.
First, the browser returned me this error:
GET http://localhost:9000/src/locale/nl/translation.json?_=1450946571510 404 (Not Found)
Secondly, I'm using two languages in my application: Dutch (nl-BE) and French (fr-BE).
Here is how my folder structure looks like:
src (inside root)
.. locale
..... fr-BE
........ translation.json
..... nl-BE
........ translation.json
Here is what my full main.js file looks like:
import 'bootstrap';
import {I18N} from 'aurelia-i18n';
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.globalResources('converters/dateFormat')
.plugin('components/index')
.plugin('plugins/index')
.plugin('aurelia-i18n', (instance) => {
instance.setup({
resGetPath: 'src/locale/__lng__/__ns__.json',
lng: 'nl-BE',
attributes: ['t', 'i18n'],
getAsync: true,
sendMissing: false,
fallbackLng: 'fr-BE',
debug: false
});
});
aurelia.start().then(a => a.setRoot());
}
I'm trying to setup a hello world where I have my view and viewmodel set like this:
import {inject} from 'aurelia-framework';
import {I18N} from 'aurelia-i18n';
#inject(I18N)
export class EntryDetails {
constructor(i18n){
this.i18n = i18n;
this.i18n.setLocale('nl-BE').then(() => console.log('test'));
}
}
And my view:
<template>
<span t="hello"></span> <span t="world"></span>
</template>
The problem is not that it's not working. The problem is that I'm getting an error that states my folder nl is missing in my locale folder. But I never specified that anywhere..
That is how i18next resolves translation files.
The lookup order for keys is always:
nl-BE language + country
nl language only
fallback thats defined in options.fallbackLng (en) (string or array of fallback language)
loaded resources:
locale/en/translation.json
locale/nl/translation.json
locale/nl-BE/translation.json
http://i18next.com/translate/#resolve
So you need to have nl/translation.json, even if it is not specified in config. It can be just empty but valid json file with content {}
My question, while at first somewhat similar to this one, seems to be a more basic question - and might be signaling a bug in the build system. I've created a custom build for my dojo application. I only build one layer right now, here's what the profile script/object looks like:
dependencies = {
stripConsole: "all",
action: "release",
optimize: "shrinksafe",
releaseName: "myProject",
// list of locales we want to expose
localeList: "en-gb,en-us,de-de",
layers: [
{
// Name: a relative path from the dojo.js in the desination directory.
name: "../../myProject.js",
dependencies: [
"myPackage.MyDataStore",
// MyWidget depends on a few other widgets, and has its own
// translation files.
"myPackage.MyWidget"
]
}
],
prefixes: [
// These paths are relative to the location of dojo.js
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "myPackage", "../../../src/myPackage" ]
]
}
When I run a build with that description it outputs files in the following directory structure:
release/
release/myProject/
release/myProject/dijit/
... dijit ...
release/myProject/dojo/
... dojo ...
release/myProject/dojox/
... dojox ...
release/myProject/myPackage/
... my custom package ...
release/nls/
myProject_en-us.js
myProject_de.js
etc..
../myproject.js
../myProject.js.uncompressed.js
Finally, in my test HTML page - I've got the following:
<script type="text/javascript">
var djConfig = {
debug: true,
parseOnLoad: false,
modulePaths: { // paths to directories in relation to dojo's location.... hurr.
'myPackage': '../myPackage',
'dojox': '../dojox',
'dijit': '../dijit'
}
};
</script>
<script type="text/javascript" src="./release/myProject/dojo/dojo.js.uncompressed.js"></script>
<script type="text/javascript" src="./release/myProject.js.uncompressed.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.require('myPackage.MyDataStore');
dojo.require('myPackage.MyWidget');
var store = new myPackage.MyDataStore();
var widget = new myPackage.MyWidget({
store: store
}, dojo.byId('testWidget'));
widget.startup();
});
</script>
But unfortunately, Firebug spits this out at me:
Bundle not found: MyWidget in myPackage , locale=en-us
What I Think is Happening
I've traced through some of the code leading up to the above error and it seems like the dojo.i18n._preloadLocalizations() call at the end of the file doesn't actually load in the correct nls file from ./release/nls.
Any idea how to fix this without resorting to manually including the nls files with <script> tags?
It's a bug of dojo, you should not use '..' in your layers name in case it will generate a NLS package.
please refer to http://bugs.dojotoolkit.org/ticket/5225