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

Question

我有多个布局，它们依赖于一些共享的打字稿文件，这就是为什么我想与使用 webpack 的多个布局共享这些文件。

我试图在我的ajax.ts 中包含jquery 并收到此错误：

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 文件（webpack 根目录）中导入 jquery，它可以正常工作。由于 ajax.ts 位于此文件夹之外，在这些文件中导入 jquery、lodash 等库的最佳方法是什么？

Answer 1

为了在您的上下文中加载 js 库的最佳方式，必须遵守以下几点：

1. 使用 npm 之类的包管理器安装每个 js 库（例如 jquery）
2. 对于每个库，它都需要一个 TypeScript 定义文件（例如，@types/jquery，可以在 npmjs.com 下找到）
3. 也使用 npm 安装此 TypeScript 定义文件
4. 注意“文件”下 tsconfig.json 中的每个 TypeScript 定义，例如

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

5. 使用库 requirejs 引人注目地执行此操作（第 1-4 点）。这是一个 js 文件和模块加载器。
6. 现在您已准备好在 TypeScript 主文件中加载 js 库，例如：

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

其他说明：

• 在 index.html 文件中：在脚本标记下仅引用 js 捆绑文件，例如由网页包。
• Webpack 需要一个 TypeScript 加载器。
• 在“files”下的 tsconfig.json 文件以及 TypeScript 文件中引用导出的 TypeScript 类，例如：

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

希望对你有帮助，得到一个合适的结构！

补充：

尝试以下操作：在 ayax.ts 中引用一个 js 库，例如：

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

如果您在 require 命令中调用库名称如“test”，则无法解析“test”。它尝试解析 package.json 并且找不到它，因为它在根目录之外。