I have a project written in CoffeeScript.
I want to rewrite it to TypeScript by parts. But when I try required coffee, I have an error that module not found.
Is there any opportunity to fix this problem?
webpack.config.js
var webpack = require("webpack"),
path = require("path"),
ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : {
"app" : "./public/app/start.coffee",
"style": "./sass/application.scss"
},
output : {
path : path.join(__dirname, "/build"),
filename: "[name].js"
},
resolve: {
extensions: ["", ".js", ".coffee", ".ts", ".html"],
root : [
path.join(__dirname, "/public"),
path.join(__dirname, "/public/vendor"),
path.join(__dirname, "/sass"),
path.join(__dirname, "/public/templates")
],
alias : {
marionette : path.join(__dirname, "/public/vendor/backbone.marionette"),
leaflet : path.join(__dirname, "/public/vendor/leaflet/dist/leaflet-src"),
"leafletDraw" : path.join(__dirname, "/public/vendor/leaflet/leaflet.draw"),
"leafletDrawLocal" : path.join(__dirname, "/public/vendor/leaflet/leaflet.draw.local"),
"leafletZoom" : path.join(__dirname, "/public/vendor/leaflet/leaflet.zoomSlider"),
"leafletMeasure" : path.join(__dirname, "/public/vendor/leaflet/leaflet.measure"),
"leafletContextmenu" : path.join(__dirname, "/public/vendor/Leaflet.contextmenu/dist/leaflet.contextmenu"),
"leafletCluster" : path.join(__dirname, "/public/vendor/leaflet.markercluster/dist/leaflet.markercluster-src"),
"leafletLabel" : path.join(__dirname, "/public/vendor/leaflet/leaflet.label"),
"leafletMarkerRotate" : path.join(__dirname, "/public/vendor/leaflet/leaflet.Marker.Rotate"),
"jqueryCookie" : path.join(__dirname, "/public/vendor/jquery.cookie"),
validation : path.join(__dirname, "/public/vendor/backbone.validation"),
sweet : path.join(__dirname, "/public/vendor/sweet-alert"),
"bootstrapDatepicker" : path.join(__dirname, "/public/vendor/bootstrap.datepicker"),
"momentLocale" : path.join(__dirname, "/public/vendor/moment.locale"),
toggle : path.join(__dirname, "/public/vendor/bootstrap-toggle"),
"jqueryFileupload" : path.join(__dirname, "/public/vendor/jquery.fileupload"),
"jquery.fileupload-audio" : path.join(__dirname, "/public/vendor/jquery.fileupload-audio"),
"jquery.fileupload-image" : path.join(__dirname, "/public/vendor/jquery.fileupload-image"),
"jquery.fileupload-jquery-ui": path.join(__dirname, "/public/vendor/jquery.fileupload-jquery-ui"),
"jquery.fileupload-process" : path.join(__dirname, "/public/vendor/jquery.fileupload-process"),
"jquery.fileupload-ui" : path.join(__dirname, "/public/vendor/jquery.fileupload-ui"),
"jquery.fileupload-validate" : path.join(__dirname, "/public/vendor/jquery.fileupload-validate"),
"jquery.fileupload-video" : path.join(__dirname, "/public/vendor/jquery.fileupload-video"),
"jqueryIframe-transport" : path.join(__dirname, "/public/vendor/jquery.iframe-transport"),
"jqueryUIWidget" : path.join(__dirname, "/public/vendor/jquery.ui.widget"),
"datetimepicker" : path.join(__dirname, "/public/vendor/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min"),
"colorpicker" : path.join(__dirname, "/public/vendor/bootstrapcolorpicker/dist/js/bootstrap-colorpicker"),
"jqueryMagnific-popup" : path.join(__dirname, "/public/vendor/jquery.magnific-popup.min"),
"paralleljs" : path.join(__dirname, "/public/vendor/parallel"),
"heatcanvas-worker" : path.join(__dirname, "/public/vendor/heatcanvas-worker"),
"Worker" : path.join(__dirname, "/public/vendor/Worker"),
"moment" : path.join(__dirname, "/public/vendor/moment/moment"),
"templatesFile" : path.join(__dirname, "/build/templates")
}
},
module : {
//noParse: /vendor/,
loaders: [
{test: /\.coffee/, loader: "coffee", exclude: /node_modules|vendor/},
{test: /((?!\.d\.).)*\.ts/, loader: "ts", exclude: /node_modules|vendor/},
{test: /\.html/, loader: "ejs"},
{
test : /\.scss$/,
loader : ExtractTextPlugin.extract("style", "css!autoprefixer!sass?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib") + "&includePaths[]=" + path.resolve(__dirname, "./mixins/app_mixins")),
exclude: /node_modules|vendor/
},
{
test : /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
},
{test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file"},
{test: /underscore^\./, loader: "exports?_"},
{test: /backbone^\./, loader: "exports?Backbone!imports?underscore,jquery"},
{test: /leaflet\.measure/, loader: "imports?leafletDraw"},
{test: /leaflet\.Marker\.Rotate/, loader: "imports?leaflet"}
]
},
plugins: [
//new webpack.optimize.DedupePlugin(),
//new webpack.optimize.OccurrenceOrderPlugin(true),
new webpack.ProvidePlugin({
$ : "jquery",
jQuery : "jquery",
"window.jQuery": "jquery",
L : "leaflet",
Backbone : "backbone",
Marionette : "backbone.marionette",
"_" : "underscore",
"moment" : "moment"
}),
new ExtractTextPlugin('styles.css', {
allChunks: true
}),
],
bail : false, //do not report the first error as a hard error instead of tolerating it
stats : {
colors: true
//modules: true,
//reasons: true
},
profile: {}
};
tsconfig.js
{
"compilerOptions" : {
"target" : "es5",
"module" : "amd",
"noEmit" : true,
"removeComments" : false,
"declaration" : false,
"noLib" : false,
"experimentalDecorators" : true,
"preserveConstEnums" : false,
"isolatedModules" : true
},
"exclude" : [
"node_modules",
"vendor"
]
}
Error:
import * as application from "app/application";
ERROR in ./public/app/start.ts (26,30): error TS2307: Cannot find module 'app/application'
If requiring non-ts files into ts file then imposible to use es6 import syntax. Use:
var someModule = required("someModuePath")
Related
I'm currently building a microfrontend using webpack's module federation, however when I create a deployment in kubernetes it's not resolving because of an incorrect publicPath. It's still a bit complex to me and I'm not sure what to set the publicPath to as the localhost port keeps changing every deployment.
So it looks like: http://127.0.0.1:TUNNEL_PORT, whereby TUNNEL_PORT is dynamic. How would I account for this when defining my output.publicPath?
Webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const deps = require("./package.json").dependencies;
module.exports = {
output: {
publicPath: "http://localhost:3000/",
// publicPath: 'auto',
},
resolve: {
extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
},
devServer: {
port: 3000,
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.m?js/,
type: "javascript/auto",
resolve: {
fullySpecified: false,
},
},
{
test: /\.(css|s[ac]ss)$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /\.(ts|tsx|js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "microfrontend1",
filename: "remoteEntry.js",
remotes: {},
exposes: {
"./Header": "./src/Header.tsx",
"./Footer": "./src/Footer.tsx",
},
shared: {
...deps,
react: {
singleton: true,
eager: true,
requiredVersion: deps.react,
},
"react-dom": {
singleton: true,
eager: true,
requiredVersion: deps["react-dom"],
},
},
}),
new HtmlWebPackPlugin({
template: "./src/index.html",
}),
],
};
I am trying to configure .babelrc for my react project but, cant make it work in IE11.
Can someone take a look at my configuration and see if there are things that I am missing, please?
[.babelrc]
{
"presets": [
"#babel/preset-env",
[
"#babel/preset-react",
{
"useBuiltIns": "usage",
"corejs": 3.26
}
]
],
"plugins": ["#babel/plugin-transform-runtime"]
}
[webpack.common.config.js]
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
// Default. Can be erased for code simplification
entry: "./src/index.js",
output: {
filename: "[name].[contenthash].js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /[\\/]node_modules[\\/]/,
use: {
loader: "babel-loader",
},
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html"),
}),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
],
};
I have tried a lot of things(workarounds), but nothing seems to work.
The order of presets, importing core-js at the top of index.js file...
The find() at the end of this code does NOT find the inserted document.
Note: I'm using MongoDB version 3.2.15.
Why not?
How can I change the index or search parameters so that it's found?
db['test'].createIndex(
{
name: 'text',
email: 'text',
phoneNumber: 'text'
},
{
default_language: 'none',
name: 'text_index',
$caseSensitive: false,
$diacriticSensitive: false,
} );
db['test'].insert({
name: 'Chaney Waste Management',
email: 'cliffchaney#gmail.com',
phoneNumber: '(402)555-1212'
});
db['test'].find( {
$text:
{
$search: 'manage',
$language: 'none',
$caseSensitive: false,
$diacriticSensitive: false
}
} ); // Finds nothing! Why?
In case it matters, here is the full result of a db.hostInfo() call:
{
"system" : {
"currentTime" : ISODate("2017-11-09T02:38:45.379Z"),
"hostname" : "Cliff-Surface:3001",
"cpuAddrSize" : 64,
"memSizeMB" : 16310,
"numCores" : 4,
"cpuArch" : "x86_64",
"numaEnabled" : false
},
"os" : {
"type" : "Windows",
"name" : "Microsoft Windows 8",
"version" : "6.2 (build 9200)"
},
"extra" : {
"pageSize" : NumberLong(4096)
},
"ok" : 1.0
}
Hi,
I have two combo boxes. The value of second combo box depends on first combo select. The user does select the first combo then the store of second will be set accordingly.
Here are my two Combos:
Combo 1
items:[
{
xtype : 'combo',
name : 'cmbSATopFacility',
labelStyle : 'color: black; font-weight: bold; width: 250px; padding: 10;',
labelSeparator : "",
id : 'cmbSATopFacility',
width : 250,
fieldLabel : 'Top MGMT Entity',
triggerAction : 'all',
store : Ext
.create(
'Ext.data.Store',
{
id : 'store',
fields : [
{
name : 'id',
type : 'integer',
},
{
name : 'name'
} ],
remoteGroup : true,
remoteSort : true,
proxy : {
type : 'rest',
url : 'pmsRest/facilities?sub_facility_id=-3',
reader : {
root : "facilityMaster",
idProperty : 'id'
}
},
autoLoad : true
}),
displayField : 'name',
valueField : 'id',
multiSelect : false,
typeAhead : true,
listeners : {
change : function(combo) {
/// code to convert GMT String to date object
n();
Ext.getCmp('cmbSAMedFacility').getStore().load();
}
},
allowBlank : false,
//enableKeyEvents : true,
},
Combo 2
{
xtype : 'combo',
name : 'cmbSAMedFacility',
labelStyle : 'color:black;font-weight:bold;width:250px;padding:10;',
labelSeparator : "",
id : 'cmbSAMedFacility',
width : 250,
fieldLabel : 'Institution',
triggerAction : 'all',
store : medfacility,
displayField : 'name',
valueField : 'id',
multiSelect : false,
typeAhead : true,
//disabled: true,
listeners : {
click : function(combo) {
alert("hjdfhcsdj");
n();
Ext.getCmp(this).getStore().load();
}
},
allowBlank : false,
//enableKeyEvents : true,
},
]
Code to set store
var medfacility = loadFacility();
function loadFacility(){
topApp = Ext.getCmp('cmbSATopFacility').getValue( );
alert(topApp);
var urL = 'pmsRest/facilities?sub_facility_id='+topApp ;
alert(urL);
var store = Ext.create('Ext.data.Store', {
id : 'store',
fields : [
{
name : 'id',
type : 'integer',
},
{
name : 'name'
} ],
remoteGroup : true,
remoteSort : true,
proxy : {
type : 'rest',
url : urL,
reader : {
root : "facilityMaster",
idProperty : 'id'
}
},
autoLoad : true
});
return store;
}
I tried to get the values in the second combo but it didn´t work.
WE CAN USE ONLY
listeners : { change : function(combo) { Ext.getCmp('cmbSAMedFacility').bindStore(n());}},
I think you need describe a store for a second combobox, but without data (empty array).
And fill data for that store when you need by using loadData method.
Hope this helps.
I am trying to load a form and save the form details in the local storage.
I am not quite sure how i should go about it.
Any suggestions are helpful.
This is my form whose data i need to save.
var count = 3; // count to control the maximum number of selections
//Configuration class definition
Ext.define("InfoImage.view.configure.Settings",{
extend : 'Ext.form.Panel',
requires : [
//'InfoImage.view.workItemPanel',
'Ext.TitleBar', 'Ext.field.Text', 'Ext.field.Toggle',
'Ext.field.Select', 'Ext.layout.HBox',
'Ext.field.Number', 'Ext.field.Checkbox',
'Ext.form.FieldSet', 'Ext.field.Password',
'Ext.field.Url' ],
xtype : 'settingsPanel',
id : 'settings',
config : {
//store:'configStore',
scrollable : {
direction : 'vertical'
},
items : [
{
xtype : 'toolbar',
ui : 'dark',
docked : 'top',
title : 'InfoImage Settings',
items : [
{
xtype : 'button',
iconCls : 'delete2',
iconMask : true,
ui : 'normal',
id : 'homeSettingbtn'
},
{xtype: 'spacer'},
{
xtype : 'button',
//text:'Save',
iconCls : 'save_fin',
iconMask : true,
ui : 'normal',
id : 'savebtn',
handler : function() {
//console.log('hi');
//var form = Ext.getCmp('settings').getValues().validate();
//form.validate();
// var errors = form.validate();
//console.log(form.isValid());
}
},
{
xtype : 'button',
//text:'Default',
iconCls : 'default',
iconMask : true,
ui : 'normal',
handler : function() {
var form = Ext.getCmp('settings');
form.reset();
}
}
]
},
{
//fieldset defined for the Server Configuration details to be entered.
xtype : 'fieldset',
title : 'Server Configuration',
defaults : {
xtype : 'selectfield',
labelWidth : '30%',
},
items : [
{
xtype : 'urlfield',
name : 'servname',
id : 'servname',
label : 'Server Name',
labelWidth : '30%'
},
{
xtype : 'numberfield',
id : 'port',
name : 'port',
label : 'Port',
value : '80',
labelWidth : '30%'
},
{
xtype : 'selectfield',
name : 'protocol',
id : 'protocol',
label : 'Protocol',
labelWidth : '30%',
usePicker : false,
handler : function() {
},
options : [ {
text : 'HTTP',
value : 'HTTP'
}, {
text : 'HTTPS',
value : 'HTTPS'
}
]
}
]
},
{
//fieldset defined for the User Configuration details to be entered.
xtype : 'fieldset',
title : 'User Configuration',
items : [ {
xtype : 'textfield',
name : 'username',
id : 'username',
label : 'User Name',
labelWidth : '30%'
}, {
xtype : 'passwordfield',
name : 'password',
id : 'password',
label : 'Password',
labelWidth : '30%'
}, {
xtype : 'textfield',
id : 'domain',
name : 'domain',
label : 'Domain',
labelWidth : '30%'
} ]
},
{
//fieldset defined for the Work Item display attributes to be checked.
xtype : 'fieldset',
id:'check',
title : '<div class="appconfig"><div>App Configuration</div>'
+ '<br /><div style="font-size: 14px;font-weight: bold;">Work Item display attributes</div></div>',
defaults : {
xtype : 'checkboxfield',
labelWidth : '30%'
},
items : [
{
name : 'domainname',
id : 'c1',
value : 'domainname',
label : 'Domain Name',
listeners : {
check : function() {
var obj1 = Ext
.getCmp('c1');
if (obj1.isChecked()) {
obj1.check();
count++;
if (count > 3) {
Ext.Msg
.alert(
'InfoImage',
'Please choose only three fields',
Ext.emptyFn);
obj1.uncheck();
count--;
}
}
},
uncheck : function() {
var obj1 = Ext
.getCmp('c1');
if (!obj1.isChecked()) {
obj1.uncheck();
count--;
}
}
}
},
{
name : 'objectid',
id : 'c2',
value : 'objectid',
label : 'Object ID',
checked : 'true',
listeners : {
check : function() {
var obj2 = Ext
.getCmp('c2');
if (obj2.isChecked()) {
obj2.check();
count++;
if (count > 3) {
Ext.Msg
.alert(
'InfoImage',
'Please choose only three fields',
Ext.emptyFn);
obj2.uncheck();
count--;
}
}
},
uncheck : function() {
var obj2 = Ext
.getCmp('c2');
if (!obj2.isChecked()) {
obj2.uncheck();
count--;
}
}
}
},
{
name : 'servername',
id : 'c3',
value : 'servername',
label : 'Server Name',
listeners : {
check : function() {
var obj3 = Ext
.getCmp('c3');
if (obj3.isChecked()) {
obj3.check();
count++;
if (count > 3) {
Ext.Msg
.alert(
'InfoImage',
'Please choose only three fields',
Ext.emptyFn);
obj3.uncheck();
count--;
}
}
},
uncheck : function() {
var obj3 = Ext
.getCmp('c3');
if (!obj3.isChecked()) {
obj3.uncheck();
count--;
}
}
}
},
{
name : 'workitemname',
id : 'c4',
value : 'workitemname',
label : 'WorkItem Name',
checked : 'true',
listeners : {
check : function() {
var obj4 = Ext
.getCmp('c4');
if (obj4.isChecked()) {
obj4.check();
count++;
if (count > 3) {
Ext.Msg
.alert(
'InfoImage',
'Please choose only three fields',
Ext.emptyFn);
obj4.uncheck();
count--;
}
}
},
uncheck : function() {
var obj4 = Ext
.getCmp('c4');
if (!obj4.isChecked()) {
obj4.uncheck();
count--;
}
}
}
} ]
},
{
//fieldset defined for the App Subtitle to be entered.
xtype : 'fieldset',
items : [ {
xtype : 'textfield',
name : 'apptitle',
id : 'apptitle',
label : 'App Subtitle',
labelWidth : '30%',
value : 'Mobile Client Work Manager'
} ]
}
]
}
});
Do i need to create model and store? how do i get the values and store it?
Here's how you declare your store :
Ext.define('App.store.Items', {
extend: 'Ext.data.Store',
requires:"Ext.data.proxy.LocalStorage",
config: {
proxy: {
type: 'localstorage',
id: 'application-items'
},
autoLoad: true,
model: 'App.model.Item',
}
});
Here's the model
Ext.define('App.model.Item', {
extend: 'Ext.data.Model',
config: {
fields: [
'field1',
'field2'
]
}
});
Then, to add an item to the store :
store.add({field1:'value1',field2:'value2'});
store.sync();
Hope this helps
http://nareshtank.blogspot.in/2012/03/html-5-localstorage-usefull-methods.html