在webpack root之外的共享webpack模块中使用jQuery

Question

我有多个布局，这取决于某些共享的打字稿文件，这就是为什么我想与使用WebPack的多个布局共享此文件。

我正在尝试将jquery包括在我的ajax.ts中并获取此错误：

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();

我的文件夹结构看起来像这样：

/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"
    }
]

如果我尝试在layouta/app.ts file(webpack root(中导入jQuery，则可以正常工作。由于Ajax.ts居住在此文件夹之外，这是导入诸如jQuery，lodash等库的最佳方法？

Answer 1

必须观察到以下几点，以便在您的上下文中加载JS库的最佳方法：

1. 使用NPM等软件包管理器安装每个JS库(例如JQuery(
2. 在每个库中，它需要一个打字稿定义文件(例如 @type/jquery，在npmjs.com下找到(
3. 也使用NPM安装此打字稿定义文件
4. 请注意tsconfig.json中"文件"下的每个打字稿定义，例如

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

5. 使用库requirejs进行令人信服的(点1-4(。这是一个JS文件和模块加载程序。
6. 现在您准备在打字稿主文件中加载JS库，例如：

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

其他注释：

• 在index.html文件中：脚本标签下的参考，仅JS捆绑文件，例如。webpack。
• WebPack需要打字稿加载程序。
• tsconfig.json文件中的参考导出的打字稿类在"文件"下以及打字稿中的文件中，例如：

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

希望它能帮助您，获得适当的结构！

补充：

尝试以下内容：参考Ayax.ts中的JS库，例如：

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

如果您在requient命令中调用库名称，则无法解决"测试"。它尝试通过包装解决。JSON，找不到它，因为它在根部之外。