Блог

Фон:

Я добавил поддержку машинописи в свой существующий проект, поэтому я добавил ts-loader и typescript . Я думаю, что я все настроил правильно, и он отлично работает в dev prod режиме и.

Я хотел бы обновлять постепенно, сохраняя весь код JavaScript на месте и используя TypeScript для всего нового или там, где есть необходимость в рефакторинге. Поэтому, возможно, важно отметить, что TableValue.vue это старый компонент js.

Проблема:

Изменить: Это также происходит с npm run watch

Когда я npm run hot вхожу package.json : "scripts": { ..., "hot": "mix watch --hot", ...} это работает только с первой попытки. Как только я изменяю какой-либо файл и запускаю перекомпиляцию, я получаю:

 √ Mix: Compiled successfully in 19.15s
webpack compiled successfully

// Here the recompile is triggered
i Compiling Mix
√ Mix: Compiled with some errors in 509.01ms
ERROR in C:fakepathresourcesjscomponentstestcomponent.vue.ts
24:23-41
[tsl] ERROR in C:fakepathresourcesjscomponentstestcomponent.vue.ts(24,24)
      TS2307: Cannot find module './TableValue.vue' or its corresponding type declarations.

webpack compiled with 1 error
 

Я подозреваю , что эта ошибка происходит из ts-loader -за, но почему все работает с первой попытки?

Я мог бы просто проигнорировать эту ошибку, но тогда горячая замена модуля непригодна для использования, потому что мне все равно приходится вручную запускать новый процесс сборки каждый раз.

• У кого-нибудь такая установка работает?
• Что я могу сделать, чтобы устранить эту ошибку?

Infos:

Я работаю с:

• Ларавель 8.58
• Laravel Микс 6.0.25
• Vue 2.6.14
• ts-погрузчик 9.2.5
• машинописный текст 4.4.2

Here the script tag from the test component:

 <script lang="ts">
import Vue, { PropType } from 'vue';

import TableValue from "./TableValue.vue";
import Model from "@/js/types/model.js";

export default Vue.extend({
  name: "TestComponent",
  components: {
    TableValue
  },
  props: {
    'model': {
      type: Object as PropType<Model>,
      required: true
    }
  },
  data() {
    return {};
  },
});
</script>
 

Project Structure:

 app/
bootstrap/
config/
database/
node_modules/
public/
resources/
  js/
    components/
    store/
    types/
    views/
    app.js
    bootstrap.js
    routes.js
    shims-vue.d.ts
  lang/
  sass/
  views/
routes/
storage/
tests/
vendor/
composer.json
composer.lock
tsconfig.json
package-lock.json
package.json
phpunit.xml
vs.code-workspace
webpack.mix.js
 

webpack.mix.js :

 const mix = require('laravel-mix');
const ResolveTypeScriptPlugin = require("resolve-typescript-plugin").defau<

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /.tsx?$/,
                loader: "ts-loader",
                options: { appendTsSuffixTo: [/.vue$/] },
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.ts', '.vue'],
        alias: {
            '@': __dirname   '/resources'
        },
        fullySpecified: false,
        plugins: [new ResolveTypeScriptPlugin()]
    },
    devtool: 'source-map'
}).sourceMaps();

mix.ts('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.sass', 'public/css').sourceMaps()
    .vue();

mix.extract();

 

tsconfig.json :

 {
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "noImplicitAny": false,
        "importHelpers": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "allowJs": true,
        "checkJs": false,
        "sourceMap": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "resources/*"
            ]
        },
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    },
    "files": [
        "resources/js/shims-vue.d.ts"
    ],
    "include": [
        "resources/js/**/*.ts",
        "resources/js/**/*.vue",
    ],
    "exclude": [
        "node_modules",
        ".vscode",
        "app",
        "bootstrap",
        "config",
        "database",
        "public",
        "routes",
        "storage",
        "tests",
        "vendor"
    ]
}

 

Обновить:

Когда я удаляю shims-vue.d.ts , я немедленно получаю сообщение об ошибке.

 declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}
 

Похоже, что этот файл читается/применяется только один раз, а не после? Не уверен.

Похоже ts-loader , он еще не поддерживает HMR.

• https://github.com/TypeStrong/ts-loader#hot-module-replacement

Я установил плагин fork-ts-checker-webpack и обновил webpack.mix.js его до:

 const mix = require('laravel-mix');
const path = require('path');

const ResolveTypeScriptPlugin = require("resolve-typescript-plugin").defau<
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /.tsx?$/,
                loader: "ts-loader",
                options: {
                    appendTsSuffixTo: [/.vue$/],
                    transpileOnly: true
                },
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx', '.vue'],
        alias: {
            '@': path.resolve(__dirname   '/resources'),
            '@store': path.resolve(__dirname   '/resources/js/store'),
            '@components': path.resolve(__dirname   '/resources/js/components')
        },
        fullySpecified: false,
        plugins: [new ResolveTypeScriptPlugin()]
    },
    plugins: [new ForkTsCheckerWebpackPlugin()],
    devtool: 'source-map'
}).sourceMaps();

mix.ts('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.sass', 'public/css').sourceMaps()
    .vue();

mix.extract();
 

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

Я столкнулся с этим с помощью laravel-mix после добавления машинописного текста в проект Inertion / Vue 3.

Использование Volar (Не Vuter)

Чтобы исправить это, я изменил свой webpack.config.js файл с:

 const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};
 

Для:

 const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /.tsx?$/,
                loader: "ts-loader",
                options: {
                    appendTsSuffixTo: [/.vue$/],
                    transpileOnly: true
                },
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx', '.vue'],
        alias: {
            '@': path.resolve(__dirname   '/resources/js'),
        },
    },
};
 

Я не использую Typescript, но со мной происходило то же самое, когда я запускал npm run watch/hot там, где успешно только первое изменение кода, затем вы не сможете увидеть изменения, пока не запустите npm run watch/hot или npm run dev снова. Странно было то, что все успешно компилировалось при каждом внесенном мной изменении.

Мне удалось отладить его с помощью git, и я обнаружил, что импортировал компонент с неправильным именем, но не получил ошибку на консоли. Мое имя компонента было WhosApplying.vue

Я получил:

import WhosApplying from "@/whosApplying.vue"

И измените его на:

import WhosApplying from "@/WhosApplying.vue";

Эта ошибка w вместо W того, чтобы заставить меня терять часы. 😅