javascript - 由于 Regexp,Webpack 无法编译我的 javascript 文件
问题描述
我正在使用 Webpack Encore 开发一个 Symfony 4 项目。使用yarn encore dev
,我得到这个错误:
ERROR Failed to compile with 2 errors 11:45:38
These dependencies were not found:
* core-js/modules/es.regexp.exec in ./assets/js/poteauxskip.js
* core-js/modules/es.string.match in ./assets/js/poteauxskip.js
To install them, you can run: npm install --save core-js/modules/es.regexp.exec core-js/modules/es.string.match
并且 Regexp 表达式不起作用。我试着按照他们说的安装,但这是各种问题的开始。但主要是,它并没有解决主要问题,即:为什么这不起作用?我认为没有理由在我的 javascript 文件中导入任何内容以使用 Regexp,在我的整个解决方案研究中我发现没有提到这一点。
poteauxskip.js 文件:
const $ = require('jquery');
$(".tableau").addClass("d-none");
$(".serie").change(function(){
updateTableaux();
});
function updateTableaux() {
var serie1 = $("select#serie1").val() == '?' ? '[0-9A-F]' : $("select#serie1").val();
var serie2 = $("select#serie2").val() == '?' ? '[0-9A-F]' : $("select#serie2").val();
var serie3 = $("select#serie3").val() == '?' ? '[0-9A-F]' : $("select#serie3").val();
var serie4 = $("select#serie4").val() == '?' ? '[0-9A-F]' : $("select#serie4").val();
var serie5 = $("select#serie5").val() == '?' ? '[0-9A-F]' : $("select#serie5").val();
var serie6 = $("select#serie6").val() == '?' ? '[0-9A-F]' : $("select#serie6").val();
var regex = new Regexp("/" + serie1 + serie2 + serie3 + serie4 + serie5 + serie6 + "$/");
alert("12".match(regex));
}
如果我对其进行其他测试,该警报将起作用。如果我在没有任何正则表达式的情况下使用它,其他变量也可以工作。实际上,new Regexp()
或string.match()
足以导致编译错误。
包.json:
{
"devDependencies": {
"@symfony/webpack-encore": "^0.27.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"node-sass": "^4.12.0",
"popper": "^1.0.1",
"popper.js": "^1.15.0",
"sass-loader": "^7.0.1",
"webpack-notifier": "^1.6.0"
},
"name": "hyperbolic-world",
"version": "2.0.0",
"description": "Pour favoriser l'immersion dans un espace hyperbolique.",
"main": "index.js",
"author": "Julien Busset",
"license": "CC-BY-4.0",
"directories": {
"test": "tests"
}
}
webpack.config.js :
var Encore = require('@symfony/webpack-encore');
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 you JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
.addEntry('poteauxskip', './assets/js/poteauxskip.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
.configureBabel(() => {}, {
useBuiltIns: 'usage',
corejs: 3
})
// enables Sass/SCSS support
.enableSassLoader()
//.addStyleEntry('global', './assets/scss/global.scss')
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes()
// 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();
解决方案
通过添加 core-js 解决了问题yarn add core-js --dev
。
推荐阅读
- javascript - NodeJS - 如何在继续执行流程之前等待多个异步调用完成?
- javascript - TypeError:无法解构“未定义”的属性“list2”
- amazon-s3 - s3 lambda - 仅移动特定文件夹中的文件位置
- css - CSS for Outlook:拒绝以任何方式设置表格列宽
- r - 合并不同频率的 xts 对象
- r - Shiny:当通过 actionButton 评估输入条件时如何更改输出(视觉数据到警告消息,反之亦然)
- kubernetes - 在 Kubernetes 中选择正确的 etcd 备份版本
- javascript - React Hooks 中的“设置”方法不起作用
- xaml - 如何在 TopTabbedPage 上覆盖单个 FloatingActionButton
- excel - 创建动态散点图