How to import js modules (with absolute path) in my typescript file in React application?

• webpack

  331 64,178 9.8 JavaScript

  A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

  

const config = { context: path.resolve(__dirname, '../src'), mode: NODE\_ENV, optimization: { splitChunks: false, nodeEnv: NODE\_ENV, minimize: false, }, node: { net: 'empty', }, output: { path: path.resolve(__dirname, '../build/public/assets'), publicPath: '/assets/', sourcePrefix: ' ', pathinfo: DEBUG, //https://webpack.js.org/configuration/output/#output-pathinfo }, module: { noParse: [/html2canvas/], rules: [ { test: /\.tsx?$/, enforce: 'pre', use: { loader: 'awesome-typescript-loader' }, }, ...shimLoaders, ...selectiveModulesLoader, { test: /\.(t|j)sx?$/, loader: 'happypack/loader?id=jsx-without-proptypes', include: [ path.resolve(__dirname), path.resolve(__dirname, '../src'), ], }, { test: /\.jsx?$/, loader: 'happypack/loader?id=jsx-without-lodash-plugin', include: [ path.resolve(__dirname, '../src/app/modules/insights/'), ], exclude: /node\_modules/, }, { test: /\.jsx?$/, loader: 'happypack/loader?id=jsx-with-proptypes', }, { test: /\.jsx?$/, loader: 'babel-loader', query: { presets: [['env', { include: ['babel-plugin-transform-es2015-template-literals'] }]], }, }, { test: /\.css$/, use: getCssLoaders({ pwd: PWD, debug: DEBUG, }), }, ...getScssRules(DEBUG, PWD), { test: /\.less$/, use: [DEBUG ? 'css-loader' : 'css-loader?minimize', 'less-loader'], }, { test: /\.txt$/, loader: 'raw-loader', }, { test: /\.svg$/, loader: 'spr-svg-loader', }, { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader', query: { name: DEBUG ? '[path][name].[ext]' : '[hash].[ext]', // ?[hash] limit: 10000, }, }, { test: /\.(woff|woff2)$/, loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/font-woff', }, { test: /\.(otf|ttf)$/, loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/octet-stream', }, { test: /\.eot$/, loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/vnd.ms-fontobject', }, { test: /\.(wav|mp3)$/, loader: 'file-loader', query: { name: DEBUG ? '[path][name].[ext]' : '[hash].[ext]', // ?[hash] }, }, { test: /\.pug/, loader: 'pug-loader', }, { test: /\.html$/, include: /src\/app/, loader: StringReplacePlugin.replace({ replacements: [ { //Replaces ES6 strings from languagePack to simple string pattern: /\_\_\(\s*`([^`]*)`\s*\)/gi, replacement: (match, p1) => { let replacedStr = p1; replacedStr = replacedStr.replace(new RegExp('\\$\\{([\\w\\.\\:\\-]+)\\}', 'g'), '\' + $1 + \''); return `'${replacedStr}'`; }, }, { //Following methods - look out carefully for the *quotes* (single/double) //doing what i18nPlugin would do for html files - with the *single* quotes pattern: /\_\_\(\s*'(.+?)'\s*\)/g, replacement: (match, p1) => { const replacedStr = p1; return `'${replacedStr}'`; }, }, { //doing what i18nPlugin would do for html files - with the *double* quotes pattern: /\_\_\(\s*"(.+?)"\s*\)/g, replacement: (match, p1) => { const replacedStr = p1; return `"${replacedStr}"`; }, }, ], }), }, ], }, resolve: { modules: [ path.resolve(PWD), path.resolve(PWD, '..'), 'node\_modules', 'web\_modules', 'src', ], extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.webpack.js', '.web.js'], alias: ALIAS, // symlinks: false, //https://webpack.js.org/configuration/resolve/#resolve-symlinks, https://github.com/webpack/webpack/issues/1643 }, plugins: [getProvidePlugin(), getLoaderOptionPlugin({ debug: DEBUG }), ...getHappypackPlugin({ debug: DEBUG })], resolveLoader: { modules: ['node\_modules', path.resolve(PWD, '../../node\_modules'), path.resolve(PWD, './config/loaders/')], alias: { text: 'raw-loader', // treat text plugin as raw-loader jst: 'ejs-loader', style: 'style-loader', imports: 'imports-loader', }, }, bail: !DEBUG, watch: DEBUG, cache: DEBUG, stats: DEBUG ? { colors: true, reasons: false, hash: VERBOSE, version: VERBOSE, timings: true, chunks: false, chunkModules: VERBOSE, cached: VERBOSE, cachedAssets: VERBOSE, performance: true, } : { all: false, assets: true, warnings: true, errors: true, errorDetails: false },}; Another Edit

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project