egoist / poi Goto Github PK
View Code? Open in Web Editor NEW⚡A zero-config bundler for JavaScript applications.
Home Page: https://poi.js.org
License: MIT License
⚡A zero-config bundler for JavaScript applications.
Home Page: https://poi.js.org
License: MIT License
not sure if that should be vbuild issue
yarn keeps exiting with an error "cannot find @sindresorhus\df\index.js"
npm works fine
detailed log:
yarn install v0.15.1
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
warning [email protected]: The engine "rhino" appears to be invalid.
[3/4] Linking dependencies...
error ENOENT: no such file or directory, open 'D:\Projects\vue-bootstrap-ui\node_modules@sindresorhus\df\index.js'
at Error (native)
info Visit http://yarnpkg.com/en/docs/cli/install for documentation about this command.
If I start with a new node install, 7.1.0 for example:
nvm install node
Install yarn first:
npm -g install yarn
and install vbuild using yarn:
yarn global add vbuild
now inside a project, try to run using:
vbuild --dev
ERROR in multi client
Module not found: Error: Can't resolve 'babel' in '/Users/neves/Documents/git/paliari-e-city-nfe'
@ multi client
ERROR in (webpack)-hot-middleware/client-overlay.js
Module not found: Error: Can't resolve 'ansi-html' in '/Users/neves/.config/yarn/global/node_modules/webpack-hot-middleware'
@ (webpack)-hot-middleware/client-overlay.js 25:15-35
@ (webpack)-hot-middleware/client.js?reload=true
@ multi client
ERROR in (webpack)-hot-middleware/client-overlay.js
Module not found: Error: Can't resolve 'html-entities' in '/Users/neves/.config/yarn/global/node_modules/webpack-hot-middleware'
@ (webpack)-hot-middleware/client-overlay.js 40:15-39
@ (webpack)-hot-middleware/client.js?reload=true
@ multi client
Now if I install vbuild using npm, it works:
npm -g install vbuild
vbuild --dev
Could use something like https://github.com/xudafeng/detect-port
because it sometimes raises a vue-template-compiler version mismatches
issue.
vue-cli
is good, but vue init egoist/vbuild-simple my-project
is too long to type
To use vue.config.json
instead of vbuild.js
so that it can be ported into a vue-cli template.
But the limitation is that we cannot benefit from javascript anymore, since it's plain json. But yet when your project goes to require more customizations, you are recommended to vbuild --eject
instead.
export default {
babel(config) {
return {...config, plugins: ['new-plugin']}
},
postcss(config) {
return [...config, myPostcssPlugin()]
},
webpack(config) {
return {...config, devtool: false}
}
}
The main idea is to use the same way to update these configs, they take the original config as the argument and return the new config.
vbuild 3.1.3
dist/vendor.11172a5f.js
App.vue
dist/vendor.50964e69.js
shouldn't the vendor file stay the same between builds? from what I understand we add the hash for cache purposes which is undermined if the hash changes every build.
If the output format is umd
or cjs
the vendor thunk should be removed by default.
The aim is to quick start a project using vue-cli
and vbuild
together:
$ vue-cli init egoist/vv my-project
$ cd my-project
$ npm install
# this script implicitly runs `vbuild -d`
$ npm run dev
# and this scripts run `vbuild`, which means build for production
$ npm run build
This would be useful to work with some API endpoint.
https://github.com/chimurai/http-proxy-middleware
{
"proxy": {
"/api": "https://some.api.endpoint.com"
}
}
This works vbuild --dev -c vbuild.js
while this doesn't vbuild --dev
Just installed vbuild globally from master, created a project via vbuild init foo
.
Now, when running npm run dev
and then changing eg src/components/App.vue
will not update the page in the browser.
Console logs however get pushed via HMR(including [HMR] Nothing hot updated.
, though), but there's just no update in the rendered DOM.
Try eg changing text-align: center;
-> text-align: left;
in App.vue
to reproduce
People may forget to install Vue and run into issues, it's easy to solve though, we still can check vue before that and throw more clear warning.
Not only good for unit testing web apps, but for testing vue related libraries, such as filter, component.
Hi there,
thanks for this awesome starting point to create vue apps. I'm trying it out right now and so far I love it.
I was just trying to use bulma. Although I can include scss files, @import
ing the framework drops this error
ERROR in /Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/css-loader?sourceMap!./src/assets/styles/app.scss
Module not found: Error: Can't resolve './bulma' in '/Users/sumitkumar/Projects/car2go-autobook/src/assets/styles'
@ /Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/css-loader?sourceMap!./src/assets/styles/app.scss 3:10-140
@ /Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/css-loader?sourceMap!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-loader/lib/style-rewriter.js?id=data-v-739eacbf!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/App.vue
@ /Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-style-loader!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/css-loader?sourceMap!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-loader/lib/style-rewriter.js?id=data-v-739eacbf!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/App.vue
@ ./src/components/App.vue
@ ./src/app.js
@ ./src/index.js
@ multi client
I couldn't find a clear documentation of how to properly include css/scss frameworks or even my own files as there are no example files included (just the CSS in the vue component).
Any help on how you intended to do this is much appreciated.
I just made another component https://github.com/egoist/vue-slim-modal and configure jest once again. We need vbuild test
now!
This package relies on the merge webpack config feature.
Usage:
// vue.config.js
module.exports = {
mergeConfig: [
require('vbuild-addons')
]
}
Hopefully it will at least cover these removed features: #30
Currently your lint rule set is the only one usable. It'd be nice if we could provide our on eslint file and have it use that. Maybe by specifying a path to it?
There's a big benefit of having an eslint file in the root. It allows editors or IDEs to use it while editing.
Currently the workflow is:
in dev mode:
<script src="http://localhost:4000/client.js"></script>
vbuild --dev --electron
for your web appelectron /your/entry/file.js
for your electron appin production mode:
./dist/index.html
in electron entry filevbuild
to build your web app to ./dist
I'm finding a way to simplify this.
Writing <style lang='sass'>
created an error. Couldn't find anything in the guide about it
If I open the generated html, it won't work because the JS url started with '/'.
HTML opened from disk:file:///D:/Work/vue-form-generator/dist/index.html
But browser want to load js from:
file:///D:/assets/bundle.cc2a07533dc5e3026dc8.js Failed to load resource: net::ERR_FILE_NOT_FOUND
Because the url in the html is: /assets/bundle.cc2a07533dc5e3026dc8.js
vbuild 4.11, on a fresh init
:
$ vbuild --dev
> draft is running at http://localhost:4000
> Mode Hot Reloading, IIFE
> Entry[client] src/index.js, /usr/local/lib/node_modules/vbuild/node_modules/webpack-hot-middleware/client.js?reload=true
> Output ~/src/test/draft/dist/[name].js
> Config ~/src/test/draft/vue.config.js
> Port 4000
> Devtool eval-source-map
ERROR in ./src/components/App.vue
Module build failed: Error:
Vue packages version mismatch:
- [email protected]
- [email protected]
ERROR in ./src/components/App.vue
Module build failed: Error:
Vue packages version mismatch:
- [email protected]
- [email protected]
This may cause things to work incorrectly. Make sure to use the same version for
both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
at Object.<anonymous> (/usr/local/lib/node_modules/vbuild/node_modules/vue-template-compiler/index.js:8:9)
at Module._compile (module.js:571:32)
at Module._compile (/usr/local/lib/node_modules/vbuild/node_modules/source-map-support/source-map-support.js:471:25)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/usr/local/lib/node_modules/vbuild/node_modules/vue-loader/lib/parser.js:1:16)
at Module._compile (module.js:571:32)
at Module._compile (/usr/local/lib/node_modules/vbuild/node_modules/source-map-support/source-map-support.js:471:25)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/usr/local/lib/node_modules/vbuild/node_modules/vue-loader/lib/loader.js:3:13)
at Module._compile (module.js:571:32)
at Module._compile (/usr/local/lib/node_modules/vbuild/node_modules/source-map-support/source-map-support.js:471:25)
at Object.Module._extensions..js (module.js:580:10)
@ ./src/app.js 3:0-37
@ ./src/index.js
@ multi client
Child html-webpack-plugin for "index.html":
[16:33:19] Failed in 75 ms
I just installed vbuild with the starter kit for electron.
i ran vbuild --electron --watch -e main.js
and also tries vbuild --electron --dev -e main.js
but its not really doing anything other than compiling.
Am i doing this wrong or is there a beter way?
In some places it is unclear which files certain code should be placed in. One example is the first code block in the "Server Bundle" page, which references this:
externals: Object.keys(require('./package.json').dependencies)
externals
isn't documented in the config and it errors if i use it there, but the other two fields are in config. I'm not sure what this block is telling me to do.
I first installed vbuild on Friday. The setup I have currently worked at that time. After updating to the latest (2.2.0) my build is now failing.
It looks like it's due to failing to find items internally in vbuild... seems strange to me. Has anyone noticed anything similar or know what may be causing the issue?
> [email protected] dev /Users/<user>/Git/vue-prototype
> vbuild --dev --lint
> vbuild is running at http://localhost:4000
> Mode Hot Reloading, IIFE
> Entry[0] src/index.js
> Entry[1] ~/Git/vue-prototype/node_modules/vbuild/node_modules/webpack-hot-middleware/client
> Output ~/Git/vue-prototype/dist/[name].js
> Config ~/Git/vue-prototype/vue.config.json
> Port 4000
> Devtool eval-source-map
webpack: wait until bundle finished: /
webpack built 1c75320386ad96fb425c in 985ms
Hash: 1c75320386ad96fb425c
Version: webpack 2.1.0-beta.22
Time: 985ms
Asset Size Chunks Chunk Names
client.js 28.6 kB 0 client
ERROR in multi client
Module not found: Error: Can't resolve '/Users/<user>/Git/vue-prototype/node_modules/vbuild/node_modules/webpack-hot-middleware/client' in '/Users/<user>/Git/vue-prototype'
@ multi client
ERROR in ./src/index.js
Module build failed: Error: Cannot read config file: /Users/<user>/Git/vue-prototype/node_modules/vbuild/node_modules/eslint-config-egoist-vue/index.js
Error: Cannot find module '/Users/<user>/Git/vue-prototype/node_modules/vbuild/node_modules/eslint-config-egoist-vue/index.js'
at Function.Module._resolveFilename (module.js:339:15)
at module.exports (/Users/<user>/Git/vue-prototype/node_modules/resolve-from/index.js:14:16)
at module.exports (/Users/<user>/Git/vue-prototype/node_modules/require-uncached/index.js:11:17)
at loadJSConfigFile (/Users/<user>/Git/vue-prototype/node_modules/eslint/lib/config/config-file.js:160:16)
at loadConfigFile (/Users/<user>/Git/vue-prototype/node_modules/eslint/lib/config/config-file.js:199:22)
at Object.load (/Users/<user>/Git/vue-prototype/node_modules/eslint/lib/config/config-file.js:498:18)
at loadConfig (/Users/<user>/Git/vue-prototype/node_modules/eslint/lib/config.js:63:33)
at new Config (/Users/<user>/Git/vue-prototype/node_modules/eslint/lib/config.js:228:38)
at CLIEngine.executeOnText (/Users/<user>/Git/vue-prototype/node_modules/eslint/lib/cli-engine.js:736:28)
at lint (/Users/<user>/Git/vue-prototype/node_modules/eslint-loader/index.js:42:18)
at Object.module.exports (/Users/<user>/Git/vue-prototype/node_modules/eslint-loader/index.js:166:3)
@ multi client
webpack: bundle is now VALID.
Hi (me again 😉)
greenkeeper is telling me 4.1.4 broke my build.
The problem is this commit: ef2e078
Broken build output: https://travis-ci.org/INTECH-RGBH/homie-dashboard/jobs/178998122#L400
The problematic code is:
<style lang="sass" scoped>
.image {
margin: auto;
margin-bottom: 10px;
}
</style>
Thanks!
would be nice to have start-up template with a sample of custom HTML+CSS+JS, it can be created as a command of vbuild (like vbuild init) or as a template in vuejs-templates
Similar to create-react-app project
It is not obvious what should be in custom html template, how to bundle CSS and include static assets
How do I use mergeConfig option to add the following for loading jQuery globally?
plugins = [
new webpack.providePlugin({
jQuery: "jquery",
"$": "jquery",
"window.jQuery": "jquery",
"window.$": "jquery"
})
]
Currently using [email protected]
Webpack 2 and its docs are very close now, thinking about upgrading to use webpack 2 latest. PRs and discussions are welcome 😅
The installation was successful using npm but failed when I attempted to use yarn (prior to installing via npm).
System is Windows 10, Node version 6.9.2. The error generated was:
error An unexpected error occurred: "ENOENT: no such file or directory, open 'C:\Users\{me}\AppData\Local\Yarn\config\global\node_modules\@sindresorhus\df\index.js'".
This was the first time I've ever (attempted) to use yarn but the command was entered exactly asd listed in the vbuild docs (i.e. yarn global add vbuild
).
Otherwise, I'm looking forward to checking out this great looking Vue tool.
Getting NPM error: chmod no such file or directory error.
Maybe related to: npm/npm#9633
When you build out the webpack config you're using this...
webpackConfig.resolve.alias = {
src: _.cwd(srcPath),
components: _.cwd(srcPath, 'components'),
store: _.cwd(srcPath, 'vuex', 'store.js'),
css: _.cwd(srcPath, 'css'),
views: _.cwd(srcPath, 'views')
}
That assumes a lot about someone's directory structure. It's also notably missing router
. Regardless, my advice would be to instead do the following.
webpackConfig.resolve.modules.push(_.cwd(srcPath)
In general, gives a more robust way of configuring imports without going through the dot slash hell. It makes it where anything in the src directory can be directly imported as opposed to only the things that are explicitly aliased.
It seems process.stdout.clearLine
is undefined when the build step is used on a CI without tty, causing the build to fail (see this build for example).
I am trying to use the lang attribute in my style declaration for scss
.
I installed node-sass
and sass-loader
I added the loader to mergeConfig
like so:
module.exports = {
title: 'myapp',
resolve: true,
live: true,
mergeConfig: {
// following options will be merged
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["sass"]
}
]
}
}
}
But I'm getting an error:
Module not found: Error: Can't resolve 'scss' in '.../src/components/'
@ ./src/components/Input.vue 5:0-166
My vue file style declaration looks like this:
...
<style lang="scss">
$prime-color: blue;
.input { color: $prime-color; }
</style>
Changing the dist target does not work. In my vbuild
config, I set the dist
option to something like:
dist: path.join(__dirname, 'dist', 'sub-folder'),
Then, the html index file that is generated has a hardcoded payload like this:
<html><head></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">{"statusCode":404,"error":"Not Found"}</pre></body></html>
Any hint? I'm looking at that and will report back any finding I make.
i added a script tag to App.vue
; hot reloading fails with:
Root or manually mounted instance modified. Full reload required.
could we have an example where we can immediately test out hot reloading?
Hi there,
I tried vbuild
out and really liked it. This kind of "no config just build" experience is really cool. I remember seeing a suggestion somewhere of pulling this into vuejs
organization, but there are some ideas I want to discuss.
The way it works currently has overlapping functionality with vue-cli
. The difference is the tradeoff between user experience and configurability. vbuild
is very very nice for quick prototyping, however in production, almost every user will have different needs, so a pre-configured build tool has limited flexibility in production use.
My hope is that we can fold vbuild
into vue-cli
as a new command: vue build
, and give it a more clearly defined goal: making prototyping Vue apps super super easy. So:
vue init
;vue build --dev
(and in most cases can later just copy the src
files into a production scaffold generated with vue init
)By focusing on prototyping we can worry less about production problems, and provide more user experience improvements:
buble
*.vue
file, e.g. vue build App.vue
and boomnpm install
them automaticallyIf you are interested in this idea, I'd love to have you join the team and work on this feature. What do you think?
The default script tag generated in dev is:
<script src=http://localhost:4000/client.js></script>
But that doesn't work when accessing from my phone, for example.
How can I convert to:
<script src=/client.js></script>
Could follow https://facebook.github.io/jest/docs/tutorial-webpack.html, a more seamless integration between vbuild and jest would be great.
Is it possible to run eslint on its own to check code in src without being part of vbuild prod?
I feel pretty dumb to ask that, but how do we add a favicon.ico
?
Even if there are 20 tabs open, when the dev server is exited from the command line the browser gets closed. Happening on Chrome on Linux. open: true
in config.
It is annoying to have to say "yes" every time I load up the dev server. In my setup port 4000 is always taken. I just would like to specify which port vbuild uses for the dev server.
There should be a way to merge webpack config, maybe like --merge-config my-webpack-config.js
https://github.com/survivejs/webpack-merge might be useful for merging loaders.
Hi there, I'm getting this with the default project after running vbuild init my-project
and npm run dev
[Vue warn]: Cannot find element: #app
I'm trying to use vbuild and I have my stylesheets with less, but I'm getting this error
As you can see, I'm trying to import normalize. I've use Vue with less before with browserify and it works perfect, but I've never used webpack before. I'm including my styles in my main vue file like this
<style lang="less" src="./style/main.less"></style>
I try to add some webpack loaders for less and for sourcemap but the error is still there. Is there something I'm missing? Here is my vbuils.js
file if it helps
import path from 'path'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
export default {
// ...
postcss: ['postcss-import'],
webpack(config, options) {
config.resolve.devtool = 'source-map'
addLess(config)
config.resolve.plugins = [ new ExtractTextPlugin('styles.css') ]
setAlias(config)
}
}
function cwd(...args) {
return path.join(process.cwd(), ...args)
}
function setAlias(config) {
config.resolve.alias = {
components: cwd('src/components'),
utils: cwd('src/utils'),
helpers: cwd('src/helpers')
}
}
function addLess(config) {
config.resolve.module = {
loaders: [
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
// activate source maps via loader query
'css?sourceMap!' +
'less?sourceMap'
)
}
]
}
}
Here's the generated package.json
{
"private": true,
"name": "<project>",
"scripts": {
"dev": "vbuild --dev",
"build": "vbuild"
}
}
}
Notice the extra closing brace.
Just upgraded and had probs running my builds:
TypeError: Cannot read property 'request' of undefined
- ExternalModuleFactoryPlugin.js:37 handleExternals
[global]/[html-webpack-plugin]/[webpack]/lib/ExternalModuleFactoryPlugin.js:37:33
- ExternalModuleFactoryPlugin.js:46 next
[global]/[html-webpack-plugin]/[webpack]/lib/ExternalModuleFactoryPlugin.js:46:8
- ExternalModuleFactoryPlugin.js:59 handleExternals
[global]/[html-webpack-plugin]/[webpack]/lib/ExternalModuleFactoryPlugin.js:59:7
- ExternalModuleFactoryPlugin.js:79 ExternalModuleFactoryPlugin.
[global]/[html-webpack-plugin]/[webpack]/lib/ExternalModuleFactoryPlugin.js:79:5
- NormalModuleFactory.js:177
[global]/[webpack]/lib/NormalModuleFactory.js:177:3
- Tapable.js:123 NormalModuleFactory.applyPluginsAsyncWaterfall
[global]/[tapable]/lib/Tapable.js:123:70
- NormalModuleFactory.js:161 NormalModuleFactory.create
[global]/[webpack]/lib/NormalModuleFactory.js:161:8
- Compilation.js:356 Compilation.process [as _addModuleChain]
[global]/[webpack]/lib/Compilation.js:356:16
- Compilation.js:427 Compilation.process [as addEntry]
[global]/[webpack]/lib/Compilation.js:427:7
- SingleEntryPlugin.js:22 SingleEntryPlugin.
[global]/[html-webpack-plugin]/[webpack]/lib/SingleEntryPlugin.js:22:15
- Tapable.js:156 Compiler.applyPluginsParallel
[global]/[tapable]/lib/Tapable.js:156:14
- Compiler.js:431 Compiler.compile
[global]/[webpack]/lib/Compiler.js:431:7
- Compiler.js:237 Compiler.runAsChild
[global]/[webpack]/lib/Compiler.js:237:7
- compiler.js:70
[global]/[html-webpack-plugin]/lib/compiler.js:70:19
pinning the html webpack plug to a more recent version solved it for me:
yarn add --dev [email protected]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.