How to configure vue in the project to have access to vue sourcemap in the browser

Open tkeer opened this issue 5 years ago • 5 comments

Do you have any tip how can I run all these flows in browser, using debugger?

I have tried cloning the vue project and import vue, but no luck!

Why searching around I stumbled on the great repo, do you have any tip how can I do this? Thanks

Feb 02 '21 15:02 tkeer

Prepare

Download vue source code and install yarn, then run the command below

yarn # install dep
yarn dev # build dist/vue.js

Node.js Only

write your test code demo.js, example:

const Vue = require('./dist/vue.js');
const obj = {};
obj._data = {x:'x v',y:{z:'z v',v: 1}};
console.log(obj)
Vue.util.defineReactive(obj,'_data');
console.log(obj)

run it

node demo.js

Now your can modify vue source code or demo.js and see what changes

With browser

Do what official web site / official hello world told your but replace the url with your local generated file.

Or follow the step below

create a demo.html and demo.js

<!DOCTYPE html>
<html>
    <header>
        <title></title>
    </header>
    <body>
        <div id="app"></div>
        <script src="./dist/vue.js"></script>
        <script src="./demo.js"></script>
    </body>
</html>

const vueObj = new Vue({
  el: '#app',
  template: '<div><div> y: {{ y }} </div><button @click="updateX(\'qwe\')"> update </button></div>',
  data() {
    return {
      x: '123'
    }
  },
  computed: {
    y(){
      return this.x+'456';
    }
  },
  methods: {
    updateX(v) {
      this.x = v;
    }
  }
})

then open the html with your browser, and modify the code as you like

Feb 25 '21 06:02 CroMarmot

Check the package.json and you will see "dev": "rollup ...", and just google the rollup's document, it tells add -m, so run yarn dev -m instead.

Mar 02 '21 01:03 CroMarmot

Thanks @CroMarmot this is really useful. Is there any way I can do it module builder (webpack). I tried to do it with yarn dev:esm but webpack generates following error

Syntax Error: Error: Failed to load plugin 'flowtype' declared in 'src/vue/.eslintrc.js': Cannot find module 'eslint-plugin-flowtype'. I have tried globally install this plugin but error is still the same.

Here is how I am importing vue

import Vue from './vue'

Mar 02 '21 16:03 tkeer

yarn dev:esm works fine on my computer.

2021-03-05 09-32-47 的屏幕截图

Mar 05 '21 01:03 CroMarmot

This works fine for me too. Do you receive any webpack error when you import it from 'dist'?

import Vue from './dist' (I guess webpack will automatically pick vue.runtime.esm.js)

Mar 05 '21 07:03 tkeer