I'm trying to figure out the right way to debug apps written in NativeScript-Vue AND using the "vue-cli-template".
There are currently two templates supported:
"nativescript-vue-template"
This one is much simpler, and debugging it is easy. There is a useful answer on that already. The debugging is done using chrome-devtools. This template doesn't use vue-cli/Webpack/Babel, so the "Sources" that you can view in Chrome are not changed in any way. You can easily set breakpoints there.
Just run e.g.:
tns debug android
You can also use the very nice VS Code plugin.
"vue-cli-template"
This one uses vue-cli/Webpack/Babel, so that the .vue Single File Components can be compiled in different ways.
Using a fresh install of the "vue-cli-template" as an example:
Run:
npm run debug:android
When you view the "Sources" of the "Hello world" demo app provided in the template, the app.js file has 17700 lines of code. It is basically the compiled dist/app/app.android.js file.
I've got some experience with vue-cli based applications. In an application configured according to the Vue documentation, when you view the "Sources" in Chrome dev-tools, apart from the compiled sources you can access the "webpack://" node, which contains the original code. You can set breakpoints there and it works.
Unfortunately the "vue-cli-template" does not work this way. There is no "webpack://" node available. You can only access the compiled sources.
I tried to follow the mentioned Vue documentation to fix this. I'm supposed to add
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
to the vue.config.js file.
The template does not have it. Should I create one? If so, where?
Maybe I need other Webpack configurations?
devtool: 'source-map'
recommended in Vue documentation doesn't work in this setup.
It started working when I used:
devtool: 'eval-source-map'
after reading Webpack documentation.
I added this option directly to the webpack.config.js file - without using any vue.config.js file.
Related
I am setting up a Snowpack project with the aim to move an existing Create-React-App application into it once things are configured the same.
I haven't found a way to import an .scss file into a .tsx file however.
The Snowpack docs only seem to discuss configuring scss as an externally built asset, suggesting putting your scss into a separate css folder { docs link }. However I would like to keep my scss files next to the tsx components they belong to, and import them into the component as I currently am.
The docs also reference a blog post discussing a setup with PostCSS, however that post suggests some issues with the approach, including that sourcemaps wouldn't work - which isn't going to fly.
I have created my project like this:
npx create-snowpack-app my-sweet-app --template #snowpack/app-template-react-typescript --use-yarn
I've then added a new scss file, src/test.scss
$best-colour: tomato;
body {
background-color: $best-colour;
}
and added an import in my src/App.tsx file:
import './test.scss';
When running yarn start I get the following error:
[error] [404] /_dist_/test.css.proxy.js
✘ /home/me/repos/my-sweet-app/public/_dist_/test.css
✘ /home/me/repos/my-sweet-app/src/test.css
Can Snowpack be configured to import scss files into tsx files equivalent to how it works in Create React App? How?
While I have not a complete answer, I faced the same problem as you. What you basically want to achieve is, to add additional tools to Snowpack's build pipeline.
If you throw in Babel with Snowpack you can add arbitrary absurd babel plugins for all your transformation needs.
Using #researchgate/babel-plugin-transform-scss-import-to-string and adding it in my babel.config.js I was able to get my Sassy stuff transpiled into strings.
However, this is not a complete solution; because now Snowpack won't pick up changes in my Sass files... :( It seem's that a lot of those new anti bundlers are just that, they are against bundling and thus combining them with additional pre-processing stuff that used to be done by our good olde bundlers is cumbersome.
I'm trying to migrate an Angular app to a shared codebase with Nativescript using the new #nativescript/schematics, however, I'm having problems importing my Angular library when building the mobile version of the app. I used the angular-cli to create the library (ng generate library).
For the web version, all I had to do was build the library separately using ng build library-name which then allowed me to import it into the main application.
How can I build a mobile version of the library that can be imported into the main application when running tns run ios --bundle? I've already migrated the components and module of the library with appropriate *.tns files.
Any help is appreciated
I had the same problem. Nativescript cli do not have this feature where we can build an angular library into npm package and use it in other projects.
I tried a workaround and it worked for me. Write a script to copy all of your project files into another directory and replace all *.tns.ts, *tns.html and *.tns.scss. files with *.ts, *.html and *.scss respectively. Then build these files using regular ng command. You can add a build configuration for the same in angular.json file to build from the copied directory. I hope it helps.
I'm sorry this is just a hyperlink answer but the space required to answer this, in my opinion, is way too large. I just finished finalizing a repo I've been working on to do exactly this. I have a whole slew of angular web libraries that I now want to make available for use on mobile using NativeScript. I have put everything I have learned so far into this repo and I hope it helps you too.
Thanks for the final push/idea #Rohit, a script for doing what he suggests is in the test-lib/gulpfile.js of this repo.
This problem is driving me mad, I have been researching and have read about the standalone and runtime version of Vue. As far as I can tell Laravel 5.4/homestead ships with the standalone version as default.
The Vue development tools in chrome show the example component so I think that part is working correctly, just cannot render the template.
I am relatively new to Vue and npm been stuck in the past with jQuery, firstly where in laravel can I check/set I want the stand alone version of Vue? If it is not that problem does any one have any ideas?
Thanks for help
VueJS supports two ways of building apps like you said.
Load all necessary scripts within your page via script tags (not combined .vue files).
Compile and bundle all your files with Gulp, Browserify, Webpack or other tools.
Can you explain what you did so far. I guess you don't compile everything down.
The comment by peaceman was the solution, I had multiple calls to elixir, I condensed down to one and it worked straight away. Thanks everyone for your help.
I'm building an application using Oracle Application Express (APEX) [so no existence of Node].
I have two issues which are somehow related concept-wise.
Issue #1:
I've included the React.js library in all of my pages to use some of its features.
I'm using babel to convert my JSX to simple JS. Everything's working fine.
But I keep on getting this warning in my console :
You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
I know I must precompile my scripts but I have no idea how. I visited the link and it got me all the more confused.
Issue #2:
The other issue I have is that I've got all my react related code in a separate .js file and I have embedded it in my page using this :
<script src="someJSFile.js" type="text/babel"></script>
Setting the type to "text/babel" raises this warning :
Fetching scripts with an invalid type/language attributes is deprecated
and will be removed in M56, around January 2017.
See https://www.chromestatus.com/features/5760718284521472 for more details.
Is there any workaround for this issue?
Issue 1: This is linked to what ever bunlder you choose (see issue 2 below). Which ever you do choose, will allow you to set the node env to production, which will put React in "production" mode - basically scraping out all the unneeded (but helpful) development messages and checks.
Issue 2: You will need some module bundler at the end of the day. Webpack is the goto at the moment. Webpack Site
Alternatives include:
Gulp + Browserify
Rollup
EDIT: I know you said "no node". You won't need node to run anything on the server, only on your local machine where you build the files. Node is easy to install on pretty much any local machine
I am using ASP.Net Core, Angular2 and Typescript and connected all together with webpack using the tutorial from Angular2 team here. That all seems to work but now I need to build each time I change a file.
Original tutorial uses system.js and that loads tons of files of course, but I just use static file middleware and no build is required for development. That is very convinient, but I cannot figure out how to do the same with webpack. It seems that webpack can only bundle everything together without an option to just load everything separately so I need to run the build each time.
Is it possible to do something so that webpack "expands" the bundle in some easy way?
P.S. I would like not to use webpack dev server and some auto-build on save and so on since the complexity is rather high alredy. So ideal solution is that I have bundles for production but direct code loaded for development like in good old days with standard mvc bundling.
Really, the best way would be to use webpack dev server. There's really not much setup involved, it's just a different command you run instead of webpack:
npm install webpack-dev-server
webpack-dev-server webpack.config.js
Then you just point script sources to http://localhost:8080/webpack-dev-server/your-bundle-name.js" in your application` tags.
This is by far the best option as you get instant incremental recompile and live-reload.
While I would strongly encourage you to use webpack-dev-server you can also just use plain webpack in watch mode:
webpack ---watch
There is no way to "expand the bundle" (and really no need to). In all likelyhood you are using webapack for more than just bundling, so you'd still require to re-build if you change a typescript file, for example. Webpack dev server or webpack in watch mode do very quick incremental compiles, and most people will just leave them running while developing.