解决在Parcel中引入jQuery过程中出现的问题

Author Avatar
hayato 2月 16, 2018

尝试使用 Parcel 来打包项目。项目主要使用了 jQuery 和 Bootstrap 。以此文来记录期间遇到的问题以及解决方案。

jQuery无法被正确引入

环境

  • Node.js 8.9.1
  • Parcel 1.5.1
  • windows 10
  • jQuery 3.3.1
  • Bootstrap 3.3.7

初始化项目

  • 安装 Parcel
  • 安装 jQuery
  • 安装 Bootstrap

创建 main.js

// main.js
import 'jquery' // 1 其实会报错
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'

$(document).ready(function() {
  console.log('hello jquery')
})

运行 parcel index.html

期望效果

浏览器控制台输出 hello jquery

实际效果

浏览器报错 Bootstrap’s JavaScript requires jQuery

证明 jQuery 并未被正确引入

解决方案

在项目目录的合适位置下新建文件 import-jquery.js

// import-jquery.js
import jquery from 'jquery'

export default (window.$ = window.jQuery = jquery)

// main.js
import '/your/path/import-jquery.js'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'

$(document).ready(function() {
  console.log('hello jquery')
})

此时浏览器控制台就会正确输出 hello jquery 了

本文参考

作者：hayato
文章版权：本站所有文章版权依赖于 CC BY-NC-SA 3.0 Unported License
本文链接：https://blog.axis-studio.org/2018/02/16/解决在Parcel中引入jQuery过程中出现的问题/