I want to know if it's possible to access the internals of one Browserify-generated bundle from another, assuming they're both already loaded on the same page. Here's an example:
If I have one bundle (bundle-a) consisting of:
index.js
menu.js
And a second bundle (bundle-b) consisting of just:
index.js (requires bundle-a/menu.js)
Then can I have my second bundle access the contents of the first bundle as indicated without bundling the two together. i.e.:
bundle-b/index.js
var Menu = require("bundle-a/menu.js");
Then how can I make this work assuming that both bundle-a and bundle-b have been loaded?
<script src="bundle-a.js"></script>
<script src="bundle-b.js"></script>
Is this at all possible? Thanks.
In this case, since menu.js is required from both bundles, it should be compiled separately.
See https://github.com/substack/node-browserify#multiple-bundles
So you could do:
$ browserify -r ./menu.js > static/menu.js
$ browserify -x ./menu.js bundle-a.js > static/bundle-a.js
$ browserify -x ./menu.js bundle-b.js > static/bundle-b.js
Related
I am attempting to get the volar vue language server to work in place of vetur for neovim's native lsp.
Using both lspconfig and lspinstall I was able to create a working custom install for sumneko_lua (unrelated but had to manually build due to some issues with the built-in :LspInstall lua). Below is that code duplicated and modified for an attempt at using this new vue server:
local vue_config = require'lspinstall/util'.extract_config('vuels')
vue_config.default_config.cmd = {'node', './node_modules/vscode-vue-languageservice/out/index.js', '--stdio'}
require'lspinstall/servers'.newvue = vim.tbl_extend('error', vue_config, {
install_script = [[
! test -f package.json && npm init -y --scope=lspinstall || true
npm install vscode-vue-languageservice#latest
]],
uninstall_script = nil
})
Running :LspInstall newvue installs properly, however :LspInfo shows this language server is attached to the buffer (of a .vue file) but not active. I believe the issue is with this path: ./node_modules/vscode-vue-languageservice/out/index.js. It exists, but may not be the correct entry point? The default vue ls simply has vls as the command because it provides a binary. Am I missing something in this package? I have yet to come across another language server without a single binary to pick out.
Thanks!
Can you try an absolute path to the out.js file? In my pretty elaborate config for a custom Volar install I'm using something just /home/myuser/dev/volar/packages/server/out/index.js (where the volar folder is just the whole volar cloned github repo). My full config is here
I don't think you can use relative paths like you did. I know you're assuming that the "./node_modules" means "workspace directory" but it's hard to tell in which directory nvim-lspconfig opens up those executables.
I have yet to come across another language server without a single binary to pick out.
Volar also provides a binary, it's volar-server (after running npm i -g #volar/server), it's just with a custom install (ie. alongside the real volar) you can't use it, because I assume you want to use your local install with custom code.
As for more indepth debugging/logging, you can check ~/.cache/nvim/lsp.log to see why the language server dies in detail.
Hello I'm using VueJS 2 and I have multiple .env in my project.
My app have .env for each company to select the company configuration (skin color / files...)
Actually I have all my .env in the root folder:
.env.company1-dev
.env.company1-staging
.env.company1-prod
.env.company2-dev
.env.company2-staging
.env.company2-prod
.env.company3-dev
.env.company3-staging
.env.company3-prod
So when I'll get 20 companies it will be confused on my root folder so it is possible to create a folder where I can place all my .env ?
The idea :
/environments/company1/
.env.dev
.env.staging
.env.prod
/environments/company2/
.env.dev
.env.staging
.env.prod
/environments/company3/
.env.dev
.env.staging
.env.prod
On your vue.config.js file you can add:
const dotenv = require("dotenv");
const path = require("path");
let envfile = ".env";
if (process.env.NODE_ENV) {
envfile += "." + process.env.NODE_ENV;
}
const result = dotenv.config({
path: path.resolve(`environments/${process.env.VUE_APP_COMPANY}`, envfile)
});
// optional: check for errors
if (result.error) {
throw result.error;
}
the before run you can set VUE_APP_COMPANY to a company name and run your app,
Note: It's important to put this code on vue.config.js and not in main.js because dotenv will use fs to read files.
References
https://github.com/motdotla/dotenv#path
https://github.com/vuejs/vue-cli/issues/787
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
The accepted answer we have also used in the past. But I found a better solution to handle different environments. Using the npm package dotenv-flow allows not only the use of different environments but has some more benefits like:
local overwriting of variables by using .env.local or .env.staging.local and so on
definition of defaults using .env.defaults
In combination we have set up our projects with this configuration:
.env
.env.defaults
.env.development
.env.production
.env.staging
.env.test
And the only thing you have to do in your vue.config.js, nuxt.config.js or other entry points is
require('dotenv-flow').config()
Reference: https://www.npmjs.com/package/dotenv-flow
The powershell solution
I was handling exactly the same problem. Accepted solution is kind of ok, but it did not solve all differences between companies. Also, if you are using npm, your scripts can look nasty. So if you have powershell, here is what I suggest - get rid of the .env files :)
You can keep your structure like you want in the question. Just convert the env files to ps1.
/build/company1/
build-dev.ps1
build-stage.ps1
build-prod.ps1
/build/company2/
build-dev.ps1
build-stage.ps1
build-prod.ps1
Inside each of those, you can fully customize all env variables, run build process and apply some advanced post-build logic (like careful auto-deploy, publishing, merging with api project, ..).
So for example company1\build-stage.ps1 can look like this:
# You can pass some arguments to the script
param (
[string]$appName = "company1"
)
# Set environment variables for vue pipeline
$env:VUE_APP_ENVIRONMENT = "company1-stage";
$env:NODE_ENV="development";
$env:VUE_APP_NAME=$appName;
$env:VUE_APP_API_BASE_URL="https://company1.stage.mycompany.com"
# Run the vue pipeline build
vue-cli-service build;
# Any additional logic e.g.
# Copy-Item -Path "./dist" -Destination "my-server/my-app" -Recurse¨
Last part is easy - just call it (manualy or from integration service like TeamCity). Or, you can put it inside package.json.
...
"scripts": {
"build-company1-stage": "#powershell -Command ./build/company1/build-stage.ps1 -appName Company-One",
}
...
The you can call whole build process just by calling
npm run build-company1-stage
Similary, you can create localhost, dev, prod, test and any other environment. Let the javascript handle the part of building the app itself. For other advanced work, use poweshell. I think that this solution gives you much more flexibility for configuration and build process.
P.S.
I know that this way I'm merging configuration and build process, but you can always extract the configuration outside the file if it gets bigger.
I'm wondering if it's possible to run Vuetify (out-of-the-box) with Vert.x. I've played around a bit and I don't see a straightforward way but perhaps I'm missing something.
Sources:
https://vuetifyjs.com/en/getting-started/quick-start
https://reactiverse.io/es4x/start/install
Steps:
Create an out-of-the-box Vuetify:
npm install #vue/cli -g
vue create my-app
cd my-app
vue add vuetify
Test that it works by running it in Node
npm run start
When I view http://localhost:8080 (using node) it looks good. So I
create a compiled version in a dist folder
npm run build
Now I would like to try and get it working in Vert.x So I add ES4X, which is supposed to allow ES 5+ js code
npm install -g es4x-pm
es4x init
npm install #vertx/unit --save-dev
npm install #vertx/core --save-prod
npm install #vertx/web --save-prod
npm install
Create an index.js file so vert.x server for the index.html
vertx.createHttpServer().requestHandler(function (req){
req.response().sendFile("dist/index.html");
}).listen(8080);
Run Vert.x
npm start
When I view http://localhost:8080 it does not show as expected. It looks like a blank page. When I view the source code of the page in a browser, it shows the contents of the index.html file. So I know it's loading it, just not interpreting it. When I view the console I see a log entry saying Syntax error: Expected expression, got '<'
Note - I would like to avoid going the 'CDN install' route shown on the Vuetify quick-start link. My project is fairly complex and I just wanted to test how Vuetify by itself worked with Vert.x before tying in all the other dependencies
You've added a bare request handler, think of it as using just core nodejs modules. In order to serve multiple files and resources you should use vertx-web (which you already installed). In this case your code should be:
import { Router, StaticHandler } from '#vertx/web';
// router acts like express if you're familiar with it
const app = Router.router(vertx);
// for any HTTP GET request this will be your
// first handler "dist" is your static files root dir
app.get().handler(StaticHandler.create("dist"));
// add more handlers as needed...
vertx.createHttpServer()
.requestHandler(app)
.listen(8080);
So now all your static files should be served correctly...
Not sure I'm grokking this question.
Vuetify is runs in the browser, Es4x runs on the server.
You just need way to serve the static 'dist' folder, as described above.
ps: I'm assuming you're not doing server-side rendering, in which case, I'm not sure if es4x will work (it might).
I'm reading Full Stack Web Development with Backbone.js by Patrick Mulder, he introduces the use of browserify.
He explains that we must code a js file /app/main.js, and then browserify it into static/bundle.js, I had no problems bundling it. But I have found some problems following the book examples, and the first thing I did to debug was to compare the author working bundle.js agains mine. Well, even when the bundled main.js and other js are the same, the bundle.js aren't equal. So I guess this is the start point of my problems.
My node version is: v0.10.33, my browserify version is: 8.0.1
As the book says, this is the command I use to generate bundle.js from main.js:
browserify -r ./app/main.js:app > static/bundle.js
To start off some differences:
The author main.js is placed on top of bundle.js
My main.js is placed on bottom of bundle.js
The first line of author's bundle.js starts with (function e(t,n,r)....
My first line starts with require=(function e(t,n,r)....
main.js source code link from git repository. It is exact as I have.
The code from main.js is:
var Backbone = require('backbone');
var $ = require('jquery-untouched');
Backbone.$ = $;
var MoviesRouter = require('routers/movies');
$(document).ready(function() {
console.log('init');
var router = new MoviesRouter({el: $('#movies') });
Backbone.history.start({
pushState: true,
root: '/'
});
});
That code is exact the same I'm using, as the book says.
Here is a jsfiddle where I pasted the code from my bundle.js
What's the actual problem you're experiencing? Don't worry about the details of what's in the bundle unless it's not performing the way it should. How are #1 and #2 affecting your use of the bundle?
#3 and #4 are explained by your use of the -r (--require) flag. If you do this, your bundle won't start with require=...:
browserify ./app/main.js -o static/bundle.js
Are you trying to expose ./app/main.js externally?
I want to precompile my ember templates. I installed an application for that, but I can only precompile one file.
I need like to select all files with .hbs extension including subfolders
I tried ember-precompile "components/**/*.hbs" -f precompiledTemplates.js
I get error saying
Error: ENOENT, no such file or directory 'components\**\*.hbs'
How do I say the program to look for .hbs files in all subfolders ?
I figured it's probably not a windows problem, but a limitation of the library I wanted to use(ember-precompile).
Instead I chose to use gulp which works well https://www.npmjs.org/package/gulp-ember-handlebars
Here's my coffeescript gulpfile for precompiling ember templates. After initiating gulp, it compiles my templates, and if one of templates changes, gulp recompiles.
gulp = require("gulp")
concat = require("gulp-concat")
handlebars = require("gulp-ember-handlebars")
gulp.task( "default", ["precompile-ember-templates"], ()->
# default tasks complete
)
gulp.task( "precompile-ember-templates", ()->
console.log("recompiling templates")
gulp.src( ["client/components/**/*.hbs"] )
.pipe( handlebars({outputType: 'browser'}) )
.pipe( concat("templates-compiled.js") )
.pipe( gulp.dest("client/public/") )
)
gulp.watch( "client/components/**/*.hbs", ["precompile-ember-templates"] )
There does seem to be a limitation within the Ember-Precompile code when handling the windows file structure and wildcards.
When running ember-precompile on windows you must do so through a cygwin terminal or similar (in my case I use git bash).
As an example in git bash when I type the line below in my project folder it works for me:
ember-precompile templates/*.handlebars -f templates/templates.js