Отладка исходного кода Vue3.x

Vue.js

Некоторые студенты под комментарием дали очень удобный способ отладки, не надо отлаживать по способу, который я писал ранее, достаточно посмотреть на следующие предложения.

  1. Используйте команду «пряжа построить -s»:
    • Вы можете напрямую использовать yarn build -s, чтобы включить отладку исходной карты, и будет создан соответствующий файл .map.
    • Вставьте сгенерированный js-файл в html-файл для подлинной отладки.
  2. Используйте команду «npm run test package имя модуля»:
    • Если вы не понимаете исходный код, например, вы не понимаете строку кода в effect.ts в модуле реактивности, вы можете закомментировать ее, а затем запустить npm run test реактивность, чтобы некоторые модульные тесты будет сообщать об ошибках Фактически, модульные тесты, которые сообщают об ошибках, являются просто комментариями После того, как проверка кода потеряна, отладчик может понять исходный код, который он не понимает, просмотрев одиночный тест.
    • Помимо запуска команды «npm run test package module», вы также можете загрузить подключаемый модуль Jest Runner в vscode, а затем напрямую выбрать односторонний файл, который необходимо запустить в каталоге __test__, нажать кнопку отладчика , а также можно запустить одиночный тест.
以上方法很简单，感谢jojowang和imart同学的回复。
下面一大坨就没有要再看了,浪费时间。

--------------------------- Дальше читать не надо, это пустая трата времени-------- ------- ------------

Несколько слов о том, как я смотрю на исходный код

  1. отладка точки останова
  2. Отладка в соответствии с демонстрационным примером или положением использования API.Каждый небольшой пример заботится только о логических ветвях, которые он прошел.

Как отлаживать исходный код ts vue3.x

  • На официальном сайте сказано, что его можно отладить с помощью команды yarn dev, но после запуска команды это сгенерированный код, а исходный код ts, написанный ею, отлаживать нельзя.
  • Фактически, регенерируя соответствующий файл исходной карты, вы можете отлаживать оригинал.
  • Взгляните на следующие скриншоты:

Если вам нужен именно этот эффект отладки, см. ниже, как сгенерировать файл исходной карты.

Создать файл исходной карты

Rollup.js Китайская документация

// rollup.config.js
export default {
  // 核心选项
  input,     // 必须
  external,
  plugins,

  // 额外选项
  onwarn,

  // danger zone
  acorn,
  context,
  moduleContext,
  legacy

  output: {  // 必须 (如果要输出多个，可以是一个数组)
    // 核心选项
    file,    // 必须
    format,  // 必须
    name,
    globals,

    // 额外选项
    paths,
    banner,
    footer,
    intro,
    outro,
    sourcemap,
    sourcemapFile,
    interop,

    // 高危选项
    exports,
    amd,
    indent
    strict
  },
};

Вы можете видеть, что у выходного объекта есть свойство исходной карты, поскольку оно может генерировать файлы конфигурации исходной карты. Файл rollup.config.js vue-следующий проект, найдите функцию createConfig

function createConfig(output, plugins = []) {
  const isProductionBuild =
    process.env.__DEV__ === 'false' || /\.prod\.js$/.test(output.file)
  const isGlobalBuild = /\.global(\.prod)?\.js$/.test(output.file)
  const isBunlderESMBuild = /\.esm\.js$/.test(output.file)
  const isBrowserESMBuild = /esm-browser(\.prod)?\.js$/.test(output.file)

  if (isGlobalBuild) {
    output.name = packageOptions.name
  }

  const shouldEmitDeclarations =
    process.env.TYPES != null &&
    process.env.NODE_ENV === 'production' &&
    !hasTSChecked

  const tsPlugin = ts({
    check: process.env.NODE_ENV === 'production' && !hasTSChecked,
    tsconfig: path.resolve(__dirname, 'tsconfig.json'),
    cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'),
    tsconfigOverride: {
      compilerOptions: {
        declaration: shouldEmitDeclarations,
        declarationMap: shouldEmitDeclarations
      },
      exclude: ['**/__tests__']
    }
  })
  // we only need to check TS and generate declarations once for each build.
  // it also seems to run into weird issues when checking multiple times
  // during a single build.
  hasTSChecked = true

  const externals = Object.keys(aliasOptions).filter(p => p !== '@vue/shared')

  output.sourcemap = true // 这句话是新增的
  return {
    input: resolve(`src/index.ts`),
    // Global and Browser ESM builds inlines everything so that they can be
    // used alone.
    external: isGlobalBuild || isBrowserESMBuild ? [] : externals,
    plugins: [
      json({
        namedExports: false
      }),
      tsPlugin,
      aliasPlugin,
      createReplacePlugin(
        isProductionBuild,
        isBunlderESMBuild,
        isGlobalBuild || isBrowserESMBuild
      ),
      ...plugins
    ],
    output,
    onwarn: (msg, warn) => {
      if (!/Circular/.test(msg)) {
        warn(msg)
      }
    }
  }
}

Просто добавьте предложение output.sourcemap = true. Заодно меняем sourceMap в конфигурационном файле tsconfig.json на true и все. Затем запустите yarn dev, и вы увидите, что файл vue/dist/vue.global.js.map создан. Затем вы можете импортировать файл vue.global.js через скрипт в xxx.html для отладки, Эффект показан выше.

С ts и rollup.js я, мягко говоря, не знаком, почти не знаком, но на изучение исходников vue3.x это не влияет. На этот раз исходный код vue3.x написан в нескольких модулях, поэтому обучение также можно разделить на модули, такие как изучение отзывчивой системы, запуск команды yarn dev reactivity для создания соответствующего файла, а затем взаимодействие с кейсом в разделе __tests__ для самостоятельной отладки Учитесь. (Э-э, кажется, сказал несколько слов...)

Категории