在 symfony 中为 @babel/plugin-proposal-class-properties 启用 classProperties
Posted
技术标签:
【中文标题】在 symfony 中为 @babel/plugin-proposal-class-properties 启用 classProperties【英文标题】:enabling classProperties for @babel/plugin-proposal-class-properties in symfony 【发布时间】:2020-11-01 14:10:51 【问题描述】:当我为我的 react 应用程序应用编写函数时,我不断收到这个 Support for the experimental syntax 'classProperties' isn't currently enabled
。就上下文而言,我正在使用 Symfony 作为后端,同时使用 React 作为前端。
来自this,它说我需要在插件中为@babel/plugin-proposal-class-properties in symfony
启用'loose':true
。但是,我在根文件夹中找不到.babelrc
文件。
我的webpack.config.js
文件:
var Encore = require('@symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured())
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one javascript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) =>
config.useBuiltIns = 'usage';
config.corejs = 3;
)
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer req api-admin)
.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;
module.exports = Encore.getWebpackConfig();
在reading 之后,我发现我可以使用configureBabel
使用配置对其进行编辑,但我不确定如何操作。
鉴于我没有 .babelrc 文件,如何使用该方法启用类属性?
任何见解将不胜感激。感谢阅读。
【问题讨论】:
【参考方案1】:我很笨,应该玩更多的。
正如文章所说,使用.configureBabel
启用插件。
所以现在我的 webpack 是一样的,但是在 configureBabelPresetEnv()
之后添加了这个:
.configureBabel((config)=>
config.plugins.push('@babel/plugin-proposal-class-properties');
)
所以新的webpack.config.js
文件现在看起来像:
var Encore = require('@symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured())
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) =>
config.useBuiltIns = 'usage';
config.corejs = 3;
)
.configureBabel((config)=>
config.plugins.push('@babel/plugin-proposal-class-properties');
)
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer req api-admin)
.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;
module.exports = Encore.getWebpackConfig();
【讨论】:
以上是关于在 symfony 中为 @babel/plugin-proposal-class-properties 启用 classProperties的主要内容,如果未能解决你的问题,请参考以下文章
Symfony Doctrine 关系在 PhpUnit 测试中为空