Я делаю проект, используя VueJS (я думаю, что это 2, но я использовал версию 3 cli для создания приложения), Quasar и webpack в Typescript.Я везде гуглил подобные проблемы и не могу понять, что не так.Я пытался редактировать файлы и устанавливать типы для библиотек, но из того, что я знаю, ничего не получалось.Я просто хочу, чтобы webpack4 успешно скомпилировал все приложение VueJS.
Это мой файл package.json, если я что-то упустил или есть проблемы с совместимостью ...
{
"name": "project_five_spa",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"webstart": "webpack --config webpack.config.js --mode development",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"babel-loader": "^8.0.4",
"bcrypt": "^3.0.0",
"bcryptjs": "^2.4.3",
"chart.js": "^2.7.3",
"clean-webpack-plugin": "^1.0.0",
"cryptr": "^4.0.0",
"google-auth-library": "^2.0.0",
"google-images": "^2.1.0",
"googleapis": "^34.0.0",
"hover.css": "^2.3.2",
"kaiser": "0.0.4",
"lodash": "^4.17.10",
"mini-css-extract-plugin": "^0.5.0",
"moment": "^2.22.2",
"moment-timer": "^1.2.3",
"nan": "^2.11.0",
"prerender-spa-plugin": "^3.4.0",
"pusher-js": "^4.2.2",
"quasar": "0.0.18",
"quasar-cli": "^0.16.4",
"quasar-extras": "^2.0.0",
"quasar-framework": "^0.16.0",
"query-string": "^6.2.0",
"register-service-worker": "^1.0.0",
"rss-parser": "^3.5.2",
"sweetalert2": "^7.22.2",
"underscore": "^1.9.1",
"universal-tilt.js": "^1.1.1",
"uuid": "^3.3.2",
"vue": "^2.5.16",
"vue-carousel": "^0.8.1",
"vue-error-page": "^1.1.7",
"vue-google-adsense": "^1.2.0",
"vue-grid-layout": "^2.1.13",
"vue-meta": "^1.5.0",
"vue-router": "^3.0.1",
"vue-script2": "^2.0.3",
"vue-session": "^1.0.0",
"vue-youtube-embed": "^2.1.3",
"vue2-editor": "^2.5.0",
"vuedraggable": "^2.16.0",
"vuelidate": "^0.7.4",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4",
"vuex-router-sync": "^5.0.0",
"webpack-md5-hash": "0.0.6"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@types/chai": "^4.1.0",
"@types/mocha": "^2.2.46",
"@vue/cli-plugin-babel": "^3.0.0-beta.15",
"@vue/cli-plugin-e2e-nightwatch": "^3.0.0-beta.15",
"@vue/cli-plugin-pwa": "^3.0.0-beta.15",
"@vue/cli-plugin-typescript": "^3.0.0-beta.15",
"@vue/cli-plugin-unit-mocha": "^3.0.0-beta.15",
"@vue/cli-service": "^3.0.0-beta.15",
"@vue/test-utils": "^1.0.0-beta.16",
"babel-plugin-component": "^1.1.1",
"chai": "^4.1.2",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^2.0.2",
"csv-loader": "^3.0.2",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"papaparse": "^4.6.2",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"ts-loader": "^4.5.0",
"typescript": "^2.9.2",
"v-chart-plugin": "^0.2.14",
"vue-class-component": "^6.2.0",
"vue-cli-plugin-quasar": "^0.1.7",
"vue-loader": "^15.4.2",
"vue-mixin-decorator": "^1.0.0",
"vue-property-decorator": "^6.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.14.0",
"webpack-bundle-tracker": "^0.4.2-beta",
"webpack-cli": "^3.0.8",
"write-file-webpack-plugin": "^4.5.0",
"xml-loader": "^1.2.1"
}
}
Извинитето, что это не выглядит организованным или опрятным, это потому, что я пробовал много вещей.Ниже приведен мой файл webpack.config.js
// TODO: Webpack not working, figure out all errors and bugs
var path = require('path')
var webpack = require('webpack')
// var css = require('./file.styl') // Just the CSS
// var css = require('!css!stylus!./file.styl') // CSS with processed url(...)s
const VueLoaderPlugin = require('vue-loader/lib/plugin')
var BundleTracker = require('webpack-bundle-tracker')
var WriteFilePlugin = require('write-file-webpack-plugin')
const WebpackMd5Hash = require('webpack-md5-hash')
// Not used Loader v
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CopyWebpackPlugin = require('copy-webpack-plugin')
// for HTML
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, './dist/'),
filename: '[name].[chunkhash].js'
},
plugins: [
new CleanWebpackPlugin('dist', {} ),
new VueLoaderPlugin(),
new BundleTracker({filename: 'webpack-stats.json'}),
new WriteFilePlugin(),
// new ExtractTextPlugin(
// {filename: 'style.[chunkhash].css', disable: false, allChunks: true}
// ),
// Custom copy for files like external images
new CopyWebpackPlugin([
{
from: './src/assets',
to: path.resolve(__dirname, './dist/assets'),
toType: 'dir'
}
]),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash()
],
module: {
rules: [
// {
// test: /\.styl$/,
// loader: 'css-loader!stylus-loader?paths=node_modules/bootstrap-stylus/stylus/'
// },
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
query: {
presets: ['@vue/app', '@babel/env']
}
},
},
{
test: /\.(sa|sc|c)ss|styl$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
},
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
// Needed for <script lang="ts"> to work in *.vue files; see https://github.com/vuejs/vue-loader/issues/109
appendTsSuffixTo: [ /\.vue$/ ]
}
},
]
},
// Below for images and such
{
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
}]
},
// Below for data files
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
// '@': 'src',
},
extensions: ['*', '.js', '.vue', '.json', ".ts", ".tsx"]
},
watch: true,
}
Далее следует ошибка с консоли:
ERROR in ./src/styles/quasar.styl (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/styles/quasar.styl)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Expected ':' after $primary in assignment statement
in C:\Users\Royce\virtualenvironment\app_api\project_five_api\project_five_spa\src\styles\quasar.variables.styl (line 4, column 1)
at runLoaders (C:\Users\Royce\virtualenvironment\app_api\project_five_api\project_five_spa\node_modules\webpack\lib\NormalModule.js:301:20)
at C:\Users\Royce\virtualenvironment\app_api\project_five_api\project_five_spa\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\Users\Royce\virtualenvironment\app_api\project_five_api\project_five_spa\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\Users\Royce\virtualenvironment\app_api\project_five_api\project_five_spa\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.render [as callback] (C:\Users\Royce\virtualenvironment\app_api\project_five_api\project_five_spa\node_modules\sass-loader\lib\loader.js:52:13)
at Object.done [as callback] (C:\Users\Royce\virtualenvironment\app_api\project_five_api\project_five_spa\node_modules\neo-async\async.js:8077:18)
at options.error (C:\Users\Royce\virtualenvironment\app_api\project_five_api\project_five_spa\node_modules\node-sass\lib\index.js:294:32)
@ ./src/styles/quasar.styl 2:14-185
@ ./src/main.ts
ERROR in ./node_modules/kaiser/lib/index.js 4:2
Module parse failed: 'return' outside of function (4:2)
You may need an appropriate loader to handle this file type.
|
| require("earlgrey-runtime/5");var tmp$0 = undefined;var $targ$1 = undefined;var accum$0 = undefined;var $targ$2 = undefined;var accum$1 = undefined;var $targ$3
= undefined;var accum$2 = undefined;var $targ$4 = undefined;var accum$3 = undefined;var $targ$5 = undefined;var accum$4 = undefined;var $targ$25 = undefined;var accum$13 = undefined;var $targ$26 = undefined;var accum$14 = undefined;var accum$15 = undefined;var accum$16 = undefined;var accum$17 = undefined;var accum$18 = undefined;var accum$19 = undefined;var accum$20 = undefined;var accum$21 = undefined;var accum$22 = undefined;var accum$23 = undefined;var accum$24 = undefined;var
accum$25 = undefined;var accum$26 = undefined;var m$23 = undefined;var $targ$33 = undefined;var $targ$34 = undefined;var $targ$35 = undefined;var $targ$36 = undefined;var $targ$37 = undefined;var $targ$38 = undefined;var $targ$39 = undefined;var $targ$40 = undefined;var $targ$41 = undefined;var $targ$42 = undefined;var $targ$43 = undefined;var $targ$44 = undefined;var $targ$45 = undefined;var $targ$46 = undefined;var $targ$47 = undefined;var $targ$48 = undefined;var $targ$49 = undefined;var $targ$50 = undefined;var TYPEID$0 = undefined;var registry$0 = undefined;var object__minus__name$0 = undefined;var make__minus__type__minus__id$0 = undefined;var register$0 = undefined;var register__minus__all$0 = undefined;var _type__minus__id$0 = undefined;var get__minus__handler$0 = undefined;var maybe__minus__handler$0 = undefined;var extend__minus__handler$0 = undefined;var object__minus__serializer$0 = undefined;var singleton__minus__serializer$0 = undefined;var register__minus__singleton$0 = undefined;var register__minus__singletons$0 = undefined;var register__minus__function$0 = undefined;var register__minus__functions$0 = undefined;var Serializer$0 = undefined;var default__minus__serializer$0 = undefined;var serialize$0 = undefined;var deserialize$0 = undefined;var shallow__minus__copy$0 = undefined;var deep__minus__copy$0 = undefined;var cmds$0 = undefined;var $targ$0 = undefined;if ((tmp$0 = send(global, "@@KAISER", true), tmp$0 === undefined || tmp$0 === null ? tmp$0 : tmp$0.loaded)) {
> return global["@@KAISER"];
| }TYPEID$0 = Symbol("TYPEID");registry$0 = __amp____colon__(($targ$1 = { typeId: "native:null" }, accum$0 = {}, accum$0["native:null"] = $targ$1, accum$0), __amp____colon__(($targ$2 = { typeId: "native:undefined" }, accum$1 = {}, accum$1["native:undefined"] = $targ$2, accum$1), __amp____colon__(($targ$3 = { typeId: "native:boolean" }, accum$2 = {}, accum$2["native:boolean"] = $targ$3, accum$2), __amp____colon__(($targ$4 = { typeId: "native:number" }, accum$3 = {}, accum$3["native:number"] = $targ$4, accum$3), ($targ$5 = { typeId: "native:string" }, accum$4 = {}, accum$4["native:string"] = $targ$5, accum$4)))));object__minus__name$0 = function objectName() {
| var tmp$1 = undefined;var tmp$3 = undefined;var tmp$2 = undefined;var name$0 = undefined;var m$1$0 = undefined;var object$0 = undefined;var req$0 = undefined;var t0$0 = undefined;var m$0$0 = undefined;m$0$0 = arguments;t0$0 = m$0$0.length;if (t0$0 >= 1 && t0$0 <= 2) {
@ ./node_modules/quasar/lib/index.js 3:5931-5948
@ ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/layouts/Default.vue?vue&type=script&lang=js&
@ ./src/layouts/Default.vue?vue&type=script&lang=js&
@ ./src/layouts/Default.vue
@ ./src/_router/static.ts
@ ./src/_router/router.ts
@ ./src/main.ts
Я пытался редактировать эту библиотеку Kaiser, но, похоже, этозависит от другой библиотеки (которую я не уверен, что я использую).Я также попытался отредактировать файлы .styl для импорта напрямую из node_modules, но это все равно не сработало.Я, честно говоря, застрял и очень хочу начать работу над этим проектом.Если вам нужна дополнительная информация, я с радостью предоставлю ее.Я просто хочу, чтобы webpack скомпилировал все ts, js, css и т. Д. В один файл соответственно.