Я пытаюсь установить Jquery в своем проекте. Сначала я запускаю npm install --save-dev @types/jquery и npm install jquery --save
Итак, мой пакет. 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 хорошо в моем пакете. json, и я импортирую его в мой машинописный файл. Вы знаете, как это исправить?