Comments (11)
@FredKSchott Its working really well Sample
I will do a quick sample using http-vue-loader
this week-end.
from snowpack.
@c4software Huh, marked & prism are interesting. I actually never realized that UMD packages would be supported by default just due to the fact that they don't have any imports to worry about. ๐ง
+1 for a full example. No one really publishes .vue
files to npm (correct me if I'm wrong on this!) so then the only concern is just getting an example of a .vue
source file being compiled correctly using @pika/web dependencies.
from snowpack.
Hi,
It's a good question. With the latest Vue package on NPM there is a problem, the ยซ advertised ยป package for module is "module": "dist/vue.runtime.esm.js"
.
It's great (if you don't need templating), but in the dist
folder there is an another ESM build (i think the one we want) vue.esm.browser.js.
With the current version of @pikapkg/Web we can't choose which ESM build to pick, so for me, with VueJS we are stuck with the current packaging configuration.
PS: I know its not directly related to pikapkgโฆ
from snowpack.
@c4software you actually can point to the correct file, if you'd like. See here, where I got around a package that only exported a "main" entrypoint: lukejacksonn/perflink#15
As for .vue
dependencies, they probably won't install correctly. @pika/web doesn't do any transpilation, and my understanding is that .vue
files are not valid JS.
If you mean that you are writing .vue
source files, then @pika/web dependencies should work like any other import! If someone can get an example together, I'd love to add it to the EXAMPLES list!
from snowpack.
@FredKSchott Perfect ! I had to upgrade Pikapkg/Web but its working flawlessly ๐
And for the .vue
files are indeed not valid JS, those file are transpiled when bundling, but (i didn't try it) there is a http-vue-loader
package on github : https://github.com/FranckFreiburger/http-vue-loader
from snowpack.
Thanks for great responses. So, in theory, .vue source files should work if transpiled when bundling it or we could use the http-vue-loader ?
It would be great if someone could provide a full example.
from snowpack.
@FredKSchott Its working really well Sample
I will do a quick sample using
http-vue-loader
this week-end.
@c4software Thanks for your example, but i got a mistake when follow your webDependencise
config. It's always show
Error: Cannot find module '/app/node_modules/vue/dist/vue.esm.browser.js/package.json'
Have you seen this problem before?
Here is the sample code https://glitch.com/~vue-esm-test
from snowpack.
@orozot try updating @pika/web, you may be using an older version
from snowpack.
@orozot Yep update @pika/web
and the problem will be fixed
from snowpack.
Hi,
should vue imports be working at this stage? I've set up snowpack using
const commonjs = require('rollup-plugin-commonjs');
const vue = require('rollup-plugin-vue');
module.exports = {
rollup: {
plugins: [
commonjs(),
vue(),
],
},
};
Serving it with npx servor --reload
I get
Loading module from โhttp://localhost:8080/src/App.vueโ was blocked because of a disallowed MIME type (โapplication/octet-streamโ).
when loading the app.
from snowpack.
Right now Snowpack is a purely dependency-transforming tool, so you'll need to to set up Babel or another source tool for source code transformation.
Snowpack v2 will have a built in dev server for you to use as well. You can track progress in #270.
You should also check out Vite: the unbundled dev server from the Vue team that works with Snowpack: https://github.com/vuejs/vite
from snowpack.
Related Issues (20)
- ๐ BUG: Can't quit dev server Win11 HOT 2
- ๐ก RFC: Option to skip esbuild transform
- ๐ BUG: hmr-client.js fails to load when inside of a srcdoc iframe
- Install snowpack for development failed. HOT 2
- ๐ก RFC: Allow acess to hmr engine websocket service
- ๐ BUG: [esinstall] duplicate export 'default' react
- ๐ BUG: dev server fails with "Uncaught TypeError: require$$0 is not a function" due to incorrect require() transform
- ๐ BUG: esinstall: ๐Putout support
- AMD requirejs module support (or docs on how to ..)
- ๐ BUG: Skypack build fails if using modern JS features
- ๐ BUG: `index.bin.js` file is mistaken as Trojan by Kaspersky and got deleted HOT 2
- ๐ก RFC: Setting to hide deprecated options in the docs
- ๐ BUG: default export problem
- ๐ BUG: problem with default export / import in some cases HOT 1
- ๐ BUG:
- ๐ BUG: Snowpack can't find /src/index.jsx no matter what I do? HOT 1
- ๐ BUG: Can't transpile files with new ES features such as optional chaining and private class fields
- ๐ BUG: vm2 has been discontinued and has a critical vulnerability identified
- I can't install a template. HOT 1
- ๐ BUG: Build Result Error: There was a problem with a file build result. [object Object]
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from snowpack.