typescript - Webpack ვერ აფიქსირებს ფაილის ცვლილებებს
მე ვიყენებ Vue-ს, .vue.html/.ts/.scss შაბლონით. თითოეული ფოლდერში არის .ts, .vue.html და .scss ფაილი, რომელიც ხდება Vue კომპონენტი. ამასთან ერთად, ვხმარობ Webpack-ს.
დღეს, როდესაც მუშაობა დავიწყე, Webpack აღარ ამჩნევს .vue.html ფაილებს. ახლა ის მხოლოდ .ts ფაილებს ჩანს რომ ამჩნევს. აქ არის ჩემი webpack კონფიგურაცია:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts', '.d.ts' ] },
entry: {
'main': './ClientApp/boot.ts'
},
module: {
rules: [
{ test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
{ test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
{ test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]},
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
plugins: [
new CheckerPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
}
}),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
}),
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('site.css')
])
}];
};
მე ვცადე ხელით node node_modules/webpack/bin/webpack.js --watch --progress-ის გაშვება, რომელიც, როგორც ჩანს, სწორად ამჩნევს ცვლილებებს .ts ფაილებში, მაგრამ არა .vue.html ფაილებში.
ვინმეს ხომ არ აქვს იდეა, რა შეიძლება გამოიწვიოს ამას?
აქ არის ჩემი boot.ts:
import Vue from 'vue';
import VueRouter from 'vue-router';
import CategoriesListComponent from './components/categories-list/categories-list';
import DetailsItemComponent from './components/details-item/details-item';
import ListItemComponent from './components/list-item/list-item';
import MultiViewComponent from './components/multi-view/multi-view';
import ToolsListComponent from './components/tools-list/tools-list';
import TopMenuComponent from './components/top-menu/top-menu';
import './css/site.css';
import CategoriesListViewComponent from './views/categories-list-view/categories-list-view';
import ScanView from './views/scan-view/scan-view';
import SettingsViewComponent from './views/settings-view/settings-view';
import ToolsListViewComponent from './views/tools-list-view/tools-list-view';
import ActionButtonComponent from './components/action-button/action-button';
import InputFieldComponent from './components/input-field/input-field';
import DropDownComponent from './components/drop-down/drop-down';
import NavBarComponent from './components/nav-bar/nav-bar';
import Cookies from './data/cookies';
import ActionFieldComponent from './components/action-field/action-field';
import PushTokenHandler from './native/push-token-handler';
require('devextreme/dist/css/dx.common.css')
Vue.use(VueRouter);
Vue.component('top-menu', TopMenuComponent);
Vue.component('list-item', ListItemComponent);
Vue.component('action-button', ActionButtonComponent)
Vue.component('multi-view', MultiViewComponent);
Vue.component('tools-list', ToolsListComponent);
Vue.component('tools-list-view', ToolsListViewComponent);
Vue.component('details-item', DetailsItemComponent);
Vue.component('categories-list', CategoriesListComponent);
Vue.component('categories-list-view', CategoriesListViewComponent);
Vue.component('scan-view', ScanView);
Vue.component('settings-view', SettingsViewComponent);
Vue.component('input-field', InputFieldComponent);
Vue.component('drop-down', DropDownComponent);
Vue.component('nav-bar', NavBarComponent);
Vue.component('action-field', ActionFieldComponent);
const routes = [
{ path: '/', component: require('./pages/toolbox/toolbox-page.vue.html') },
{ path: '/scan', component: require('./pages/scan/scan-page.vue.html') },
{ path: '/toolbox', component: require('./pages/toolbox/toolbox-page.vue.html') },
{ path: '/allTools', component: require('./pages/all-tools/all-tools-page.vue.html') },
{ path: '/settings', component: require('./pages/settings/settings-page.vue.html')}
];
let router = new VueRouter({
mode: 'history',
routes: routes,
});
router.beforeEach((to, _, next) => {
if (to.path !== '/settings' && Cookies.getUser() === null)
next('/settings')
else
next()
});
new Vue({
el: '#app-root',
router: router,
render: h => h(require('./components/app/app.vue.html'))
});
PushTokenHandler.init();
აქ არის ნიმუშური შედეგი:
node node_modules/webpack/bin/webpack.js --watch --progress 0% [0] compiling
Webpack is watching the files…
[0] Hash: 4f88618dc0bfb21f1877
Version: webpack 2.7.0
Child
Hash: 4f88618dc0bfb21f1877
Time: 6788ms
Asset Size Chunks Chunk Names
main.js 1.78 MB 0 [emitted] [big] main
main.js.map 2.25 MB 0 [emitted] main
[0] Hash: f94764ec275203bd08fe
Version: webpack 2.7.0
Child
Hash: f94764ec275203bd08fe
Time: 877ms
Asset Size Chunks Chunk Names
main.js 1.78 MB 0 [emitted] [big] main
main.js.map 2.25 MB 0 [emitted] main
ERROR in [at-loader] ./ClientApp/components/details-item/details-item.ts:5:39
TS1005: ',' expected.
ERROR in [at-loader] ./ClientApp/components/details-item/details-item.ts:5:5
TS2345: Argument of type '{ props: string[]; d: any; }' is not assignable to parameter of type 'VueClass'.
Object literal may only specify known properties, and 'props' does not exist in type 'VueClass'.
ERROR in [at-loader] ./ClientApp/components/details-item/details-item.ts:5:39
TS2304: Cannot find name 'd'.
ERROR in [at-loader] ./ClientApp/components/modal/modal.ts:1:45
TS2686: 'Vue' refers to a UMD global, but the current file is a module. Consider adding an import instead.
ERROR in [at-loader] ./ClientApp/components/modal/modal.ts:2:4
TS2377: Constructors for derived classes must contain a 'super' call.
შეგიძლიათ დაინახოთ მისი განახლება როცა ვედიტირებ .ts ფაილს. როცა ვედიტირებ ნებისმიერ სხვა ფაილს, უბრალოდ არაფერი ხდება.
აქ შეგიძლიათ ნახოთ „ძველი“ (დღეს დამატებული არა) .vue.html ფაილები, რომლებიც გამოჩნდება Sources-ში Chrome-ში:
და აქ შეგიძლიათ ისინი დაინახოთ Visual Studio-ში:
პასუხი #1
გამოიხატება, რომ თქვენ უნდა დაამატოთ '.vue.html', '.scss' თქვენს resolve.extensions სიაში, ტექნიკური დოკუმენტაციის მიხედვით.
ამონარიდი:
[resolve.extensions] ისაა, რაც მომხმარებლებს საშუალებას აძლევს, გადმოტანილ ფაილებზე გაფართოება არ მიუთითონ:
import File from '../path/to/file';ამის გამოყენება გადაამოქცევს ნაგულისხმევ მასივს, რაც ნიშნავს, რომ webpack აღარ შეეცდება მოდულების გადაწყვეტას ნაგულისხმევი გაფართოებების გამოყენებით.
დაზუსტდით, რომ თქვენს კომპონენტებში იყენებთ თქვენს .scss და .vue.html ფაილების გაფართოებებს, ან დაამატეთ ისინი resolve-ში. თუ თქვენ ელით, რომ import CategoriesListComponent from './components/categories-list/categories-list'; იმპორტირება მოახდენს Vue კომპონენტს, Webpack-ს ეს კონფიგურაცია სჭირდება.