目录结构
admin/ -> backend webpack
js/
.yarnrc
webpack.config.js
package.json
assets/ -> frond webpack
管理/文件内容:
.yarnrc
--modules-folder node_modules_admin
这正确创建了 admin/node_modules_admin 管理员使用 boostrap 3，前端使用 boostrap 4，因此需要单独的文件夹。
webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
// the project directory where compiled assets will be stored
.setOutputPath('./../public/admin/')
// the public path used by the web server to access the previous directory
.setPublicPath('/admin')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.createSharedEntry('vendor', [
'jquery',
'bootstrap',
// 'fullcalendar',
'./js/vendor.js',
// you can also extract CSS - this will create a 'vendor.css' file
// this CSS will *not* be included in page1.css or page2.css anymore
// 'bootstrap-sass/assets/stylesheets/_bootstrap.scss'
])
.addEntry('js/admin', './js/admin.js')
.addEntry('js/datatables', './js/datatables.js')
.addStyleEntry('css/appLess', './css/app.less')
.addStyleEntry('css/admin', './css/admin.scss')
// uncomment to define the assets of the project
// .addEntry('js/app', './assets/js/app.js')
// .addStyleEntry('css/app', './assets/css/app.scss')
// uncomment if you use Sass/SCSS files
.enableSassLoader()
// uncomment for legacy applications that require $/jQuery as a global variable
.autoProvidejQuery()
.autoProvideVariables({
$: "jquery",
jQuery: "jquery",
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
})
// .enableVersioning()
.enableLessLoader()
// .addLoader(
// {test: require.resolve('signature_pad'), loader: 'expose?SignaturePad'},
// )
.enableBuildNotifications()
// .addLoader(
// {
// test: require.resolve('wow.js/dist/wow.js'),
// loader: 'exports?this.WOW'
// })
.addLoader(
{
test: /\.(jpe?g|png|gif)$/i,
loader:"file-loader",
query:{
name:'[name].[ext]',
outputPath:'images/'
//the images will be emmited to public/assets/images/ folder
//the images will be put in the DOM <style> tag as eg. background: url(assets/images/image.png);
}
})
;
let config = Encore.getWebpackConfig();
config.resolve.alias = {
'handlebars': 'handlebars/dist/handlebars.min.js'
};
// module.exports = {
// entry: [
// 'fullcalendar',
// ...
// ]
// }
module.exports = config;
package.json
{
"devDependencies": {
"@symfony/webpack-encore": "^0.21.0",
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"url-loader": "^1.0.1",
"webpack-notifier": "^1.6.0"
},
"dependencies": {
"admin-lte": "^2.4.8",
"bootstrap-editable": "^1.0.1",
"datatables-all": "^1.10.13",
"datatables-buttons": "^1.0.3",
"datatables-fixedheader": "^3.1.0",
"datatables.net": "^1.10.19",
"datatables.net-bs": "^1.10.19",
"datatables.net-buttons-bs": "^1.5.1",
"datatables.net-dt": "^1.10.19",
"datatables.net-fixedheader-bs": "^3.1.3",
"eonasdan-bootstrap-datetimepicker": "^3.1.3",
"fullcalendar": "^2.9.1",
"handlebars": "^4.0.12",
"jquery": "^2.2.4",
"jquery-form": "^4.2.2",
"jquery-slimscroll": "^1.3.8",
"jquery-ui-bootstrap": "^1.0.0",
"jquery-validation": "^1.18.0",
"jquery.fancytree": "^2.30.0",
"js-cookie": "^2.2.0",
"masonry-layout": "^4.2.2",
"popover": "^2.4.1",
"readmore-js": "^2.2.1",
"script-loader": "^0.7.2",
"select2": "^4.0.6-rc.1",
"timeago": "^1.6.3",
"timeago.js": "^4.0.0-beta.1",
"webpack-icons-installer": "^2.0.0",
"webpack-jquery-ui": "^2.0.1",
"x-editable": "^1.5.1"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production"
}
}
config/framework.yaml
framework:
secret: '%env(APP_SECRET)%'
#default_locale: en
#csrf_protection: true
#http_method_override: true
# Enables session support. Note that the session will ONLY be started if you read or write from it.
# Remove or comment this section to explicitly disable session support.
session:
handler_id: ~
assets:
packages:
backend:
json_manifest_path: '%kernel.project_dir%/public/admin/manifest.json'
frontend:
json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
我进入管理目录
~/PhpstormProjects/vista_bralion_docker/admin$ yarn install
yarn install v1.12.1
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.94s.
尝试生成文件
~/PhpstormProjects/vista_bralion_docker/admin$ yarn run encore dev --watch
yarn run v1.12.1
error Command "encore" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
我尝试直接运行安可
:~/PhpstormProjects/vista_bralion_docker/admin$ node_modules_admin/@symfony/webpack-encore/bin/encore.js
internal/modules/cjs/loader.js:550
throw err;
^
Error: Cannot find module '@babel/core'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15)
at Function.Module._load (internal/modules/cjs/loader.js:475:25)
at Module.require (internal/modules/cjs/loader.js:598:17)
at require (internal/modules/cjs/helpers.js:11:18)
at Object.<anonymous> (/home/grek/PhpstormProjects/vista_bralion_docker/admin/node_modules_admin/@symfony/webpack-encore/lib/config/parse-runtime.js:15:15)
at Module._compile (internal/modules/cjs/loader.js:654:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3)
这里是admin/yarn.lock
最佳答案
我的解决方案是执行以下命令:
$ yarn add --dev vue vue-loader@15.x vue-template-compiler
这是结果:
然后一切正常
其他可能的解决方案是:
- 删除node_modules目录和yarn.lock文件(如果有的话)
- 之后:
yarn 运行--ignore-engines
我在带有 digital ocean 的cloudways上使用它
关于symfony - 找不到错误命令 "encore"。 (单独的后端 webpack)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53302142/