如何使用jquery依赖项使用webpacker在rails 6上安装inputmask

时间:2019-10-15 14:46:26

标签: ruby-on-rails webpacker

我正在尝试通过webpacker在Rails 6上安装inputmask。当前出现以下错误:

Uncaught TypeError: $el.inputmask is not a function

当前设置,编译没有问题。

app / javascript / packs / application.js

require("jquery")
require("inputmask")
require("inputmask/dist/inputmask/inputmask");
require("inputmask/dist/inputmask/inputmask.numeric.extensions");
require("inputmask/dist/inputmask/inputmask.date.extensions");
require("inputmask/dist/inputmask/jquery.inputmask");

config / webpack / alias.js

const path = require('path')

module.exports = {
  resolve: {
    alias: {
    "./dependencyLibs/inputmask.dependencyLib": "./dependencyLibs/inputmask.dependencyLib.jquery",
    }
  }
}

config / webpack / environment.js

const { environment } = require('@rails/webpacker')
const aliasConfig = require("./alias")
const webpack = require('webpack')

environment.config.merge(aliasConfig)

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

我已经看到了很多示例,但是似乎没有任何效果。

2 个答案:

答案 0 :(得分:0)

我认为jquery最常见的设置是使用yarn来安装它:

yarn add jquery

然后在environment.js中

(...)

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}));

(...)

不需要require("jquery")中的app/javascript/packs/application.js

Inputmask安装:

yarn add inputmask

app/javascript/packs/application.js

import 'inputmask';

答案 1 :(得分:0)

使用

private double longitude;
private double latitude;
private GoogleApiClient googleApiClient;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_maps);

    // Obtain the SupportMapFragment and get notified when the map is ready to be used.
    SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
            .findFragmentById(R.id.map);
    mapFragment.getMapAsync(this);

    //Initializing googleApiClient
    googleApiClient = new GoogleApiClient.Builder(this)
            .addConnectionCallbacks(this)
            .addOnConnectionFailedListener(this)
            .addApi(LocationServices.API)
            .build();
}
private void getCurrentLocation() {
        mMap.clear();
        if (ActivityCompat.checkSelfPermission(this, android.Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(this, android.Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
            // TODO: Consider calling
            //    ActivityCompat#requestPermissions
            // here to request the missing permissions, and then overriding
            //   public void onRequestPermissionsResult(int requestCode, String[] permissions,
            //                                          int[] grantResults)
            // to handle the case where the user grants the permission. See the documentation
            // for ActivityCompat#requestPermissions for more details.
            return;
        }
        Location location = LocationServices.FusedLocationApi.getLastLocation(googleApiClient);
        if (location != null) {
            //Getting longitude and latitude
            longitude = location.getLongitude();
            latitude = location.getLatitude();

            //moving the map to location
            moveMap();
        }
    }
@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;
   

     getCurrentLocation();
   }

 private void moveMap() {
        /**
         * Creating the latlng object to store lat, long coordinates
         * adding marker to map
         * move the camera with animation
         */
        LatLng latLng = new LatLng(latitude, longitude);
        mMap.addMarker(new MarkerOptions()
                .position(latLng)
                .draggable(true)
                .title("Marker in My Location"));

        mMap.moveCamera(CameraUpdateFactory.newLatLng(latLng));
        mMap.animateCamera(CameraUpdateFactory.zoomTo(15));
        mMap.getUiSettings().setZoomControlsEnabled(true);


    }