Я работаю над приложением, которое было разработано довольно давно, с использованием Laravel, Vuejs и для использования .less для стилизации и других пакетов npm. Пакеты npm, используемые в то время, теперь имеют более новую версию, а некоторые даже устарели. Пытался исправить это, но застрял в некоторых проблемах с зависимостями.
Первое, что я попробовал обновить, это laravel -mix. В то время использовалась версия laravel-mix 0.8.1. Я обновил "laravel-mix": "^0.8.1" до "laravel-mix": "^5.0.4".
С этим пакетом "less": "^3.11.3" и "less-loader": "^6.1.1" были добавлены автоматически.
После того, как я попробовал npm run watch/dev, получил Cannot find module 'babel-preset-es2015' Так как это устарело, я также попытался обновить его с babel-preset-es2015 -> babel-preset-env
Добавлено npm install --save-dev @babel / preset-env (версия: 7.10.2)
Пакет. json это:
"private": true,
"scripts": {
"start": "npm run watch",
"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"@babel/preset-env": "^7.10.2",
"axios": "^0.15.3",
"babel-plugin-transform-es2015-template-literals": "^6.22.0",
"bootstrap": "^3.3.7",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "3.4.1",
"laravel-mix": "^5.0.4",
"less": "^3.11.3",
"less-loader": "^6.1.1",
"lodash": "^4.17.4",
"vue": "^2.4.4",
"vue-validator": "^3.0.0-alpha.2"
},
"dependencies": {
"aws-sdk": "^2.45.0",
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"bootstrap-datepicker": "1.7.0",
"bootstrap-vue": "^2.5.0",
"chart.js": "^2.6.0",
"chart.piecelabel.js": "^0.5.0",
"chosen-js": "^1.7.0",
"dotdotdot": "^1.7.0",
"dropzone": "^4.3.0",
"ellipsize": "0.0.3",
"extend": "^3.0.1",
"filestack-js": "^0.11.2",
"fine-uploader": "^5.14.1",
"font-awesome": "^4.7.0",
"imports-loader": "^0.7.1",
"install": "^0.10.1",
"jquery-ui": "^1.12.1",
"jquery-ui.autocomplete.match": "^1.0.2",
"js-polyfills": "^0.1.34",
"md5": "^2.2.1",
"moment": "^2.17.1",
"normalize.css": "^6.0.0",
"npm": "^4.6.1",
"patternomaly": "^1.3.0",
"progressbar.js": "1.0.1",
"query-string": "^4.3.4",
"rateYo": "git+https://github.com/prrashi/rateYo.git#2.3.2",
"rxjs": "^5.2.0",
"s3": "4.4.0",
"shortid": "^2.2.8",
"sly": "git+https://github.com/darsain/sly.git",
"sortablejs": "^1.5.1",
"sprintf-js": "^1.1.1",
"striptags": "^2",
"typicons.font": "^2.0.9",
"v-media-query": "^1.0.3",
"v-tooltip": "^2.0.3",
"video.js": "5.19.2",
"videojs-contrib-hls": "^5.5.0",
"videojs-resolution-switcher": "^0.4.2",
"vue-date-filter": "^1.0.1",
"vue-events": "^3.0.1",
"vue-html-editor": "^0.1.3",
"vue-js-toggle-button": "^1.3.3",
"vue-recaptcha": "^0.4.0",
"vue-resize": "^0.2.1",
"vue-router": "^2.7.0",
"vue-slick": "^1.1.9",
"vue-social-sharing": "^2.4.6",
"vue-style-loader": "^3.0.1",
"vue-sweetalert2": "^3.0.3",
"vue-template-compiler": "^2.4.4",
"vue2-bootstrap-modal": "^0.1.6",
"vue2-editor": "^2.0.24",
"vue2-filters": "^0.1.9",
"vue2-scrollbar": "0.0.3",
"vuedraggable": "^2.10.0",
"vuejs-datepicker": "^0.8.4",
"vuex": "^2.2.1",
"node-sass": "4.13.0"
}
}
webpack.mix. js
const webpackConfig = {
resolve : {
alias : { 'videojs-contrib-hls' : __dirname + '/node_modules/videojs-contrib-hls/dist/videojs-contrib-hls' }
},
};
mix.webpackConfig(webpackConfig).options({
uglify: {
compress: false,
mangle: {
toplevel: true,
keep_fnames: true
}
}
});
mix.js('resources/assets/backend/app/categories.js', 'public/backend/js')
.less('node_modules/dropzone/dist/min/dropzone.min.css', 'public/frontend/css')
.less('node_modules/dropzone/dist/min/basic.min.css', 'public/frontend/css')
Изменено .babelr c from
{
"presets": [
[
"es2015",
{
"modules": false
}
]
],
"plugins": [
[
"transform-es2015-arrow-functions",
{
"spec": true
}
],
"transform-es2015-template-literals",
"transform-object-rest-spread"
]
}
To
{
"presets": [
[
"@babel/preset-env”,
{
"modules": false
}
]
],
"plugins": [
[
"@babel/plugin-transform-arrow-functions"
{
"spec": true
}
],
"@babel/plugin-transform-template-literals",
"@babel/plugin-proposal-object-rest-spread"
]
}
Получены ошибки при повторном использовании npm run dev:
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):
var content = require("!!../../../css-loader/index.js?{\"importLoaders\":1}!../../../postcss-loader/src/index.js?{\"plugins\":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null]}!./basic.min.css");
Unrecognised input Error in /var/www/html/techlearning/project-files/node_modules/dropzone/dist/min/basic.min.css (line 2, column 12)
2- Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError Unknown word
var escape = require("../../../../../../../node_modules/css-loader/lib/url/escape.js");
exports = module.exports = require("../../../../../../../node_modules/css-loader/lib/css-base.js")(false);
и многие другие подобные виды. Мне не хватает этих знаний, мне нужно знать, что мне не хватает.