标签: webpack-encore

我已经从升级Symfony的应用程序3.4来4.2.2,一切都很好,但我不能让数据表经纱功能安装和使用的WebPack安可角的DataTable.

我是如何设置它的

纱线安装:

yarn add jquery@2.1.4
yarn add angular@1.4.8
yarn add datatables.net@1.10.19
yarn add datatables.net-dt@1.10.11
yarn add angular-datatables@0.6.2

将这些文件app.js与jQuery一起添加到我的Webpack中:

var $ = require('jquery');
require('datatables.net');
require('datatables.net-dt');
require('angular');
require('angular-datatables');

包含app.js在我的Webpack配置文件中:

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app.js')

    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

并通过以下方式将上述内容包含在我的前端模板中:

{{ encore_entry_script_tags('app') }}

错误

以上结果导致以下Javascript错误,似乎表明DataTables API无法访问.

Uncaught TypeError: Cannot read property 'Api' of undefined
at initAngularDataTables (angular-datatables.js:478)
at Object.invoke (angular.js:4523)

/* …

我使用的是 Symfony 4.2，我使用的是最后一个 WebPack Encore。

我有问题，因为我需要在我的树枝模板上使用我的 javascript 中的函数，但这永远行不通。

我总是有同样的问题：

未捕获的 ReferenceError：consoleText 未在 (index):17 处定义

资产/js/app.js：

require('../css/app.css');
const $ = require('jquery');
global.$ = global.jQuery = $;

资产/js/myFunctions.js

const consoleText = function (log = "Auncun log") {
console.log(log);
};

module.exports = {
    consoleText: consoleText
};

webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

我需要在我的文件之外访问我的函数 consoleText()。

如果我想访问 javascript 文件，这个工作。示例：在我的 app.js 中，我可以添加：

let myTest = require('./myFunctions');
myTest.consoleText('Blablabla');

编译后可以正常工作。

但是我需要在我的树枝模板（home.html.twig）上访问这个功能

在我的 base.html.twig 中，我使用以下命令调用了我的脚本文件：

{% …

我正在尝试将 Webpack Encore 引入我的 Symfony 4 应用程序以管理 JS 和 CSS 资产。

我安装yarn和nodejs。

然后composer require encore然后yarn install。

我有app.js文件在assets/js/.

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you require will output into a single css file (app.css in this case)
require('bootstrap');
require('../css/app.css');

// …

我正在将Webpack Encore与Symfony 3.4一起使用（迁移到Symfony 4的一部分）。

我有使用jQuery的数据表（通过NPM安装到node_modules），但是返回了以下api功能.columns：.column is not a function at

套件版本：

• jQuery的 2.14.4
• 数据表 1.10.19
• Webpack Encore 0.27.0

Webpack app.js：

global.$ = global.jQuery = require('jquery');
require('bootstrap');
global.moment = require('moment');
require('datatables.net-dt');
$.fn.dataTable = $.fn.DataTable = global.DataTable = require('datatables.net');

webpack.config.js：

var Encore = require('@symfony/webpack-encore');

Encore
// directory where compiled assets will be stored
    .setOutputPath('code/web/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for …

从升级vuetify LTS到时遇到问题vuetify 2.0.0-beta.5。

在一切顺利之前，从app.scss加载了vuetify样式

错误：

[Vue警告]：监视程序“ isDark”的getter错误：“ TypeError：无法读取未定义的属性'dark'

TypeError：无法读取未定义的属性“ dark”

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'dark'”

我已经卸载了vuetify，然后将其安装并更新为测试版，例如/sf/answers/3447563871/

package.json

{
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.9.0",
    "@mdi/font": "^3.7.95",
    "@symfony/webpack-encore": "^0.22.0",
    "axios": "^0.19.0",
    "chart.js": "^2.8.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "material-design-icons-iconfont": "^5.0.1",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "vue": "^2.6.8",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.8",
    "webpack-dev-server": "^3.2.1",
    "webpack-notifier": "^1.6.0"
  },
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "dev-server": "encore dev-server --hot --disable-host-check --host 174.28.1.5 --public 174.28.1.5:8080",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  }, …

我有一个与 webpack-encore 和 babel 一起使用的 symfony 5 项目

一开始，我在 webpack.config.js 中激活了 babel ：

.configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage';
    config.corejs = 3;
})

在通过 encore dump 生成的配置后，我似乎来制作这个 babel.config.js 文件：

module.exports = {
  'presets': [
    [
      '@babel/preset-env',
      {
        'modules': 'auto', # this line was set to false, which made the whole thing bug
        'targets': {
          node: 'current',
        },
        'useBuiltIns': 'usage',
        'corejs': 3,
      },
    ],
    '@babel/react',
  ],
  'plugins': [
    '@babel/plugin-syntax-dynamic-import',
  ],
};

在尝试了每个选项后，我尝试在没有 babel 配置文件的情况下启动 Jest，但将

.configureBabelPresetEnv((config) => {
    config.modules = 'auto'; …

jquery-ui Datepicker 小部件无法与 Encore webpack 一起使用，因为它不是一个函数：

TypeError: $(...).datepicker is not a function

这是我的 app.js：

global.$ = global.jQuery = $;
require('jquery-ui');
require('popper.js');
require('bootstrap');
require('bootstrap-table');
require('select2');
require('../lib/jquery-switchbutton/jquery.switchButton.js');
require('./bootstrap3-typeahead.min.js');

和 webpack 配置：

var Encore = require('@symfony/webpack-encore');
var path = require('path');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .autoProvideVariables({
        $: "jquery",
        jQuery: "jquery",
        Popper: ['popper.js', 'default']
    });

var config = Encore.getWebpackConfig();
config.resolve.alias = {
    jquery: path.join(__dirname, 'node_modules/jquery/dist/jquery')
};
module.exports = config;

有什么解决办法吗？谢谢！