wordpress怎么调用js(webpack引入外部js)

介绍

WordPress是一款流行的开源博客平台，它提供了丰富的插件和主题来扩展其功能和外观。在使用WordPress构建网站时，有时需要在前端页面中调用JavaScript来实现特定的功能。本文将介绍如何在WordPress中调用JavaScript，并使用webpack引入外部JS。

安装Webpack

在使用webpack引入外部JS之前，需要先安装webpack。Webpack是一个模块打包工具，它可以将多个JavaScript文件打包成一个文件，并优化代码的加载速度。可以通过npm安装webpack，使用以下命令：```npm install webpack --save-dev```

创建Webpack配置文件

在安装webpack之后，需要创建一个webpack配置文件。webpack的配置文件是一个JavaScript文件，用于指定webpack的打包规则和插件。可以创建一个名为webpack.config.js的文件，并添加以下代码：```const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')}};```在这个配置文件中，entry指定了webpack的入口文件，output指定了webpack打包后的输出文件。

引入外部JS文件

在WordPress中引入外部JS文件需要使用wp_enqueue_script函数。这个函数可以将JavaScript文件添加到WordPress的队列中，并在页面中自动加载。可以在functions.php文件中添加以下代码：```function my_scripts() {wp_enqueue_script( 'my-js', 'path/to/my.js', array(), '1.0.0', true );}add_action( 'wp_enqueue_scripts', 'my_scripts' );```在这个代码中，my-js是JavaScript文件的名称，path/to/my.js是JavaScript文件的路径，array()是依赖项的数组，1.0.0是JavaScript文件的版本号，true表示JavaScript文件应该在页面底部加载。

使用Webpack打包JavaScript文件

在将JavaScript文件添加到WordPress队列中后，可以使用webpack打包这个JavaScript文件。可以在终端中使用以下命令：```npx webpack --config webpack.config.js```这个命令将根据webpack.config.js中的配置打包JavaScript文件，并将打包后的文件输出到dist目录中。

在WordPress中使用打包后的JavaScript文件

在将JavaScript文件打包后，可以在WordPress中使用打包后的JavaScript文件。可以在functions.php文件中添加以下代码：```function my_scripts() {wp_enqueue_script( 'my-js', get_template_directory_uri() . '/dist/bundle.js', array(), '1.0.0', true );}add_action( 'wp_enqueue_scripts', 'my_scripts' );```在这个代码中，get_template_directory_uri()返回当前主题的目录路径，/dist/bundle.js是打包后的JavaScript文件的路径。

使用ES6语法

在使用webpack打包JavaScript文件时，可以使用ES6语法。ES6是JavaScript的新版本，它提供了更多的语法特性和功能。可以在JavaScript文件中使用ES6语法，并使用babel-loader将其转换为ES5语法。可以在webpack.config.js中添加以下代码：```module: {rules: [{test: /.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}]}```在这个代码中，module.rules指定了webpack的规则，test指定了需要转换的文件类型，exclude指定了不需要转换的文件夹，use.loader指定了使用的loader，use.options.presets指定了需要使用的babel预设。

使用jQuery

在WordPress中使用jQuery可以方便地实现一些功能。可以在JavaScript文件中使用jQuery，并在WordPress中引入jQuery。可以在functions.php文件中添加以下代码：```function my_scripts() {wp_enqueue_script( 'jquery' );wp_enqueue_script( 'my-js', get_template_directory_uri() . '/dist/bundle.js', array('jquery'), '1.0.0', true );}add_action( 'wp_enqueue_scripts', 'my_scripts' );```在这个代码中，wp_enqueue_script('jquery')将jQuery添加到WordPress队列中，array('jquery')指定了JavaScript文件依赖于jQuery。

使用Ajax

在WordPress中使用Ajax可以实现无需刷新页面的数据交互。可以在JavaScript文件中使用Ajax，并在WordPress中添加Ajax处理函数。可以在functions.php文件中添加以下代码：```function my_scripts() {wp_enqueue_script( 'jquery' );wp_enqueue_script( 'my-js', get_template_directory_uri() . '/dist/bundle.js', array('jquery'), '1.0.0', true );wp_localize_script( 'my-js', 'my_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );}add_action( 'wp_enqueue_scripts', 'my_scripts' );function my_ajax_handler() {// 处理Ajax请求}add_action( 'wp_ajax_my_ajax_handler', 'my_ajax_handler' );add_action( 'wp_ajax_nopriv_my_ajax_handler', 'my_ajax_handler' );```在这个代码中，wp_localize_script函数将一个JavaScript对象传递给JavaScript文件，my_ajax是JavaScript对象的名称，ajax_url指定了Ajax请求的URL。

使用React

在WordPress中使用React可以创建交互式UI组件。可以在JavaScript文件中使用React，并使用babel-loader将其转换为ES5语法。可以在webpack.config.js中添加以下代码：```module: {rules: [{test: /.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env', '@babel/preset-react']}}}]}```在这个代码中，@babel/preset-react指定了需要使用的babel预设。

使用Vue

在WordPress中使用Vue可以创建交互式UI组件。可以在JavaScript文件中使用Vue，并使用vue-loader将其转换为JavaScript文件。可以在webpack.config.js中添加以下代码：```module: {rules: [{test: /.vue$/,loader: 'vue-loader'}]},resolve: {alias: {'vue$': 'vue/dist/vue.esm.js'}}```在这个代码中，module.rules指定了webpack的规则，test指定了需要转换的文件类型，loader指定了使用的loader，resolve.alias指定了Vue的别名。

使用Bootstrap

在WordPress中使用Bootstrap可以快速创建响应式网站。可以在JavaScript文件中使用Bootstrap，并在WordPress中引入Bootstrap。可以在functions.php文件中添加以下代码：```function my_scripts() {wp_enqueue_script( 'jquery' );wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/dist/bootstrap.min.js', array('jquery'), '4.5.0', true );wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/dist/bootstrap.min.css', array(), '4.5.0', 'all' );wp_enqueue_script( 'my-js', get_template_directory_uri() . '/dist/bundle.js', array('jquery', 'bootstrap'), '1.0.0', true );}add_action( 'wp_enqueue_scripts', 'my_scripts' );```在这个代码中，wp_enqueue_script('bootstrap')将Bootstrap添加到WordPress队列中，wp_enqueue_style('bootstrap')将Bootstrap样式添加到WordPress队列中，array('jquery', 'bootstrap')指定了JavaScript文件依赖于jQuery和Bootstrap。