代码之家 › 专栏 › 技术社区 › baris1892

Symfony 4:其他JS文件中的Webpack Encore-call方法

webpack symfony

baris1892 · 技术社区 · 6 年前

我想在十分钟内打电话 index.js 从 app.js .但我明白了错误 app.test is not a function .从我的 webpack.config.js :

Encore
    .addEntry('app', './assets/js/app.js')
    .addEntry('index', './assets/js/index.js')
    .setOutputPath('public/build/')
    .createSharedEntry('vendor', [
       './assets/js/vendor/jquery-3.2.1.slim.min.js'
    ])
   .autoProvideVariables({
       $: 'jquery',
       jQuery: 'jquery',
       'window.jQuery': 'jquery'
   });

应用程序。js 只包含 test 方法:

function test() {
    return "test123";
}

和 指数js 尝试调用此方法:

let app = require("./app");

$(document).ready(function () {
    console.log(app); // empty object {}
    console.log(app.test());
});

这个设置有什么问题?我是否误解了webpack的概念?我认为有可能需要所需的模块,并像上面的例子那样访问它们。

1 回复 | 直到 6 年前

Iwan Wijaya 6 年前

首先,您的模块是相关的,所以您应该只使用1个js条目。移除你的 app.js 报关进口 webpack.config.js . 下一步在你的应用中。js,导出你的函数

function test() {
    return "test123";
}

module.exports = {
    test
};

在你的索引中。js

let app = require("./app");

$(document).ready(function () {
    app.test()
});

或者使用ESM模块的替代方法:

应用程序。js

export function test() {
    return "test123";
}

指数js

import { test } from './app';

$(document).ready(function () {
    test();
});

推荐文章

Guillaume Harari · 根据开发或产品环境加载css

6 年前

Max Silva · 无法使用vuejs2和webpack嵌入自定义字体

6 年前

Fered · Npm、Dev dependecy或dependecy,当使用webpack等将所有内容打包到一个脚本中时?

6 年前

Carlo · 如何使用Webpack 4仅在某些模块中导入jQuery?

6 年前

zh-mskl9 · Pug+Web包开发服务器

6 年前

Mizlul · 无法解析“css加载程序!”!自动刷新器加载程序'

6 年前

Aleksandr Gvozdev · 模拟'fs。readdirSync`节点。无递归的js

6 年前

jonnyg · 如何在docker文件中获取我可用的docker环境变量?(使用React/JS/webpack)

6 年前

Boris K · 将Extract Text Webpack插件与Vue CLI 3配合使用

6 年前

IsraGab · 使用webpack从angularjs模块加载特定指令

6 年前