Webpack + Typescript - Comment isoler un module non-UMD importé dans un fichier?

Dans un projet utilisant Typescript et Webpack, je voudrais faire valoir que les bibliothèques normalement globales (par exemple jQuery) sont traitées comme des globales UMD.Webpack + Typescript - Comment isoler un module non-UMD importé dans un fichier?

À l'heure actuelle, si j'omets import * as $ from 'jQuery' dans un fichier où je fais référence $, webpack réussit mais le script échoue au moment de l'exécution. Toutefois, import * as _ from 'lodash' a le comportement attendu en échouant la génération webpack lorsqu'il est omis.

Tenir compte les fichiers suivants:

first.ts

import * as $ from "jquery"; 
import * as _ from "lodash"; 

import { second } from "./second"; 

$(() => { 
    const message = _.identity("first.ts"); 
    $(".first").html(message); 
    second.Test(); 
});

second.ts

//import * as $ from "jquery"; 
//import * as _ from "lodash"; 

export const second = { 
    Test:() => { 
     const message = _.identity("second.ts"); 
     $(".second").html(message); 
    } 
}

index.html

<html> 
    <head> 
     <script type="text/javascript" src="./bundle.js"> 
     </script> 
    </head> 
<body> 
<div class="first"></div> 
<div class="second"></div> 
</body> 
</html>

package.json

{ 
    "name": "webpack-typescript-test", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "@types/jquery": "^2.0.46", 
    "@types/lodash": "^4.14.65", 
    "jquery": "^3.2.1", 
    "lodash": "^4.17.4", 
    "ts-loader": "^2.1.0", 
    "typescript": "^2.3.3", 
    "webpack": "^2.6.1" 
    } 
}

tsconfig.json

{ 
    "compilerOptions": { 
     "target": "ES5", 
     "sourceMap": true, 
     "module": "commonjs", 
     "types": [] 
    }, 
    "include": [ 
     "./*.ts" 
    ], 
    "exclude": [ 
     "./node_modules" 
    ] 
}

webpack.config.js

const path = require('path'); 

module.exports = { 
    entry: './first.ts', 
    resolve: { 
     extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       loader: 'ts-loader', 
       exclude: /node_modules/ 
      } 
     ] 
    }, 
    output: { 
     filename: 'bundle.js', 
     path: path.resolve(__dirname) 
    } 
}

est là une façon que je peux appliquer les instructions d'importation dans tous les fichiers .ts?

Source

2017-06-03 cynicaloptimist

Tenir compte en utilisant l'option externals dans config webpack: https://webpack.js.org/configuration/externals/

Je suppose que son but correspond à votre usecase assez bien.

Source

2017-06-09 13:04:31

Intéressant, merci pour la réponse. Cela ressemble à quelque chose comme * l'inverse * de mon cas d'utilisation; J'essaie d'induire une erreur quand l'instruction 'import' est manquante - je ne vois pas comment j'utilise l'option 'external 'pour le faire. – cynicaloptimist

Webpack + Typescript - Comment isoler un module non-UMD importé dans un fichier?

Répondre

Questions connexes