【发布时间】：2020-05-24 09:05:24
【问题描述】：
我尝试在我的项目中安装 Jquery，
首先我运行npm install --save-dev @types/jquery 和npm install jquery --save
所以我的 package.json 看起来像这样：
{
"name": "website2019",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "^4.0.7",
"@types/swiper": "^4.4.8",
"animejs": "^3.1.0",
"core-js": "^3.2.1",
"jquery": "^3.4.1",
"parallax-js": "^3.1.0",
"rellax": "^1.10.0",
"swiper": "^5.0.4",
"tippy.js": "^4.3.5",
"ts-loader": "^6.2.1",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-object-rest-spread": "^7.6.2",
"@babel/preset-env": "^7.6.2",
"@babel/preset-typescript": "^7.6.0",
"@babel/register": "^7.6.2",
"@types/jquery": "^3.3.32",
"@types/node": "^12.12.6",
"@typescript-eslint/eslint-plugin": "^2.2.0",
"@typescript-eslint/parser": "^2.2.0",
"autoprefixer": "^9.6.1",
"babelify": "^10.0.0",
"bootstrap": "^4.3.1",
"browser-sync": "^2.26.7",
"browserify": "^16.5.0",
"cssnano": "^4.1.10",
"cz-conventional-changelog": "^3.0.2",
"del": "^5.1.0",
"eslint": "^6.4.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-plugin-import": "^2.18.2",
"gulp": "^4.0.2",
"gulp-cheerio": "^0.6.3",
"gulp-concat": "^2.6.1",
"gulp-hash": "^4.2.2",
"gulp-header": "^2.0.9",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^6.1.0",
"gulp-inject": "^5.0.4",
"gulp-load-plugins": "^2.0.1",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.1",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-svgmin": "^2.2.0",
"gulp-svgo": "^2.1.1",
"gulp-svgstore": "^7.0.1",
"gulp-terser": "^1.2.0",
"minimist": "^1.2.0",
"sass": "^1.22.12",
"stylelint": "^11.0.0",
"stylelint-order": "^3.1.1",
"stylelint-scss": "^3.11.1",
"through2": "^3.0.1",
"tsify": "^4.0.1",
"typescript": "^3.7.2",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
"webpack-dev-server": "^3.9.0"
}
}
Jquery 和 @type/jquery 安装良好。
然后在我的 Typescript 文件中，我添加 import * as $ from "jquery"; 所以我的文件看起来像这样：
import * as $ from "jquery";
import accordion from './accordion'
import broswer from './broswer'
import feature from './feature'
import header from './header'
import parallax from './parallax'
import pricing from './pricing'
import scroll from './scroll'
import slider from './slider'
import tab from './tab'
import testimony from './testimony'
import tooltip from './tooltip'
import video from './video'
import home from './home'
// IE Polyfill
document.addEventListener('DOMContentLoaded', () => {
// LOADED
document.body.classList.add('loaded')
// BROWSER
broswer()
// HEADER
header()
// SLIDER
slider()
// TESTIMONY
testimony()
// ACCORDION
accordion()
// PARALAX
parallax()
// TOOLTIP
tooltip()
// PRICING
pricing()
// FEATURE
feature()
// TAB
tab()
// VIDEO
video()
// SCROLL
scroll()
// HOME
home()
})
在我的 home.ts 文件中，当我尝试使用 jquery 时，出现错误
export default () => {
$('.text-center').css('color', 'red');
}
Uncaught ReferenceError: $ is not defined
我不明白为什么，jquery 在我的 package.json 中很好，我将它导入到我的 typescript 文件中， 你知道如何解决吗？
【问题讨论】：
-
可能是你在加载之前执行了jquery
-
你从不在这里使用
$。因此，如果您在代码的不同部分使用它，您可能不会导入它。 -
编辑了我的帖子以回答@VLAZ
-
@EugenSunic 当我在我的文件 index.ts 的顶部导入它时，它应该首先加载（我在上次导入时导入 home）
-
好的 - 正如我所说，您使用
$而不将其导入该文件。
标签： javascript jquery typescript algorithm debugging