在Webpack根目录之外的共享Webpack模块中使用jquery

Question

I have multiple layouts, which depend on some shared typescript files, thats why I want to share this files with multiple layouts which are using webpack.

I'm trying to include jquery in my ajax.ts and get this error:

ERROR in ../_shared/ajax.ts
    Module not found: Error: Can't resolve 'jquery' in '{...}/layouts/_shared'

_shared/ajax.ts:

import * as $ from 'jquery';
export class AjaxListener {
    constructor(){
        // use jquery with $
    }
}

layoutA/app.ts:

import { AjaxListener } from "../_shared/ajax";
import { App } from "../_shared/app";


let app = new App();
let ajaxListener = new AjaxListener();

My Folder Structure looks like this:

/layouts
    /_shared
        /ajax.ts
        /app.ts
    /layoutA
        /app.ts
        /webpack.config.js
        /package.json (contains "@types/jquery": "^2.0.47" and "jquery": "^3.2.1")
        /tsconfig.json

tsconfig.json:

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "sourceMap": true
  },
  "exclude": [
    "node_modules",
    "typings/browser",
    "typings/browser.d.ts",
    "typings/main",
    "typings/main.d.ts"
  ]
}

webpack.config.js:

const ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");

var distPath = path.join(__dirname, "dist");

module.exports = [
    {
        entry: {
            app: ['./app.sass', './app.ts']
        },
        resolve: {
            extensions: [".tsx", ".js", ".ts", ".sass"]
        },
        cache: false,
        output: {
            path: distPath,
            filename: "[name]_scripts.js"
        },
        module: {
            rules : [
                {
                    enforce: 'pre',
                    // "test" is commonly used to match the file extension
                    test: /\.js$/,
                    loader: "source-map-loader"
                },
                {
                    // "test" is commonly used to match the file extension
                    test: /\.tsx?$/,
                    exclude: [/node_modules/],
                    use: [ 'babel-loader', 'ts-loader' ]
                },
                {
                    test: /\.sass$/,
                    use: [
                        {
                            loader: "style-loader" // creates style nodes from JS strings
                        },{
                            loader: "css-loader", options: { sourceMap: true }  // translates CSS into CommonJS
                        },{
                            loader: "sass-loader", options: { sourceMap: true }  // compiles Sass to CSS
                        }
                    ]
                }
            ]
        },
        devtool: "eval"
    }
]

If I try to import jquery inside layoutA/app.ts file (webpack root), it works fine. Since the ajax.ts lives outside this folder, which is the best way to import libraries like jquery, lodash etc. in these files?

Answer 1

The following points must be observed for the best way to load js libraries in your context:

1. Install every js library (eg jquery) with a package manager like npm
2. To each library it needs a TypeScript definitions file (eg @types/jquery, to find under npmjs.com )
3. Install this TypeScript definition file also with npm
4. Note every TypeScript definition in the tsconfig.json under "files" like

"files":[ "node_modules/@types/jquery/index.d.ts", "node_modules/@types/requirejs/index.d.ts", ]

5. Do this compellingly (point 1-4) with the library requirejs. This is a js file and module loader.
6. Now you are ready to load the js library in the TypeScript main file like:

require(["jquery", "urijs"], function($, uri) { // your code });

Other notes:

• In the index.html file: reference under the script tags only the js bundle files, builded by eg webpack.
• Webpack needs a TypeScript loader.
• Reference exported TypeScript classes in the tsconfig.json file under 'files' and also in the TypeScript file like:

import {Car} from "./classes/Car";

Hope it helps you, to get a proper structur!

Supplement:

Try the following: reference a js library in your ayax.ts like:

private example = require("./[path to npm library]/node_modules/test/src/test.js");

If you call the library name like 'test' in the require command, then its not possible to resolve 'test'. It try to resolve over the package.json and can not find it because its outside of the root.