Quelle est la meilleure pratique pour importer angularjs en utilisant Webpack?

Comment utilisez-vous Webpack et AngularJS ensemble et que pensez-vous du chargement de modèles et de la récupération de ressources à la demande?

Un exemple de fichier webpack.config.js bien écrit à cet effet serait très apprécié.

Tous les extraits de code affichés ici sont accessibles à ce repository github . Le code a été généreusement adapté de ce repo packetloop .

webpack.config.json

 var path = require('path'); var ResolverPlugin = require("webpack/lib/ResolverPlugin"); var config = { context: __dirname, entry: ['webpack/hot/dev-server', './app/app.js'], output: { path: './build', filename: 'bundle.js' }, module: { loaders: [{ test: /\.css$/, loader: "style!css-loader" }, { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded" }, { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" }, { test: /\.html$/, loader: "ngtemplate?relativeTo=" + path.join(__dirname, 'app/') + "!raw" }] }, // Let webpack know where the module folders are for bower and node_modules // This lets you write things like - require('bower/') anywhere in your code base resolve: { modulesDirectories: ['node_modules', 'lib/bower_components'], alias: { 'npm': __dirname + '/node_modules', 'vendor': __dirname + '/app/vendor/', 'bower': __dirname + '/lib/bower_components' } }, plugins: [ // This is to help webpack know that it has to load the js file in bower.json#main new ResolverPlugin( new ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]) ) ] }; module.exports = config; 

Pour importer AngularJS dans l’application principale.js, procédez comme suit:

app / vendor / angular.js

 'use ssortingct'; if (!global.window.angular) { require('bower/angular/angular'); } var angular = global.window.angular; module.exports = angular; 

Et puis l’utiliser dans app.js comme ça,

app.js

 ... var angular = require('vendor/angular'); // Declare app level module var app = angular.module('myApp', []); ... 

Est-ce que ce qui suit est correct? Y a-t-il un moyen plus facile de le faire? J’ai vu quelques articles (pas beaucoup par tous les standards) qui énuméraient une autre méthode.

De cette reddit poster un commentaire

 // Add to webpack.config.js#module#loaders array { test: /[\/]angular\.js$/, loader: "exports?angular" } 

Il y a aussi un autre plugin en cours de développement, à stackfull / angular-seed . Il semble être dans la bonne direction, mais est vraiment très difficile à utiliser pour le moment.

Webpack est génial, mais le manque de documentation et d’échantillons le tue.

Vous pouvez simplement exiger angular dans tous les modules (fichiers) où vous en avez besoin. J’ai un repository github avec un exemple sur la façon de le faire (en utilisant aussi webpack pour la construction). Dans l’exemple ES6, la syntaxe d’importation est utilisée mais cela ne devrait pas avoir d’importance, vous pouvez utiliser plutôt la méthode require() .

Exemple:

 import 'bootstrap/dist/css/bootstrap.min.css'; import './app.css'; import bootstrap from 'bootstrap'; import angular from 'angular'; import uirouter from 'angular-ui-router'; import { routing} from './app.config'; import common from './common/common.module'; import featureA from './feature-a/feature-a.module'; import featureB from './feature-b/feature-b.module'; const app = angular .module('app', [uirouter, common, featureA, featureB]) .config(routing); 

Je commence avec Angular + Flux avec Webpack donc je peux peut-être vous aider avec certaines choses.

Fondamentalement, j’installe tout avec NPM , il a un système d’ module export , donc ça marche comme si c’était rien. (Vous pouvez utiliser export-loader , mais pourquoi pas si nécessaire.)

Mon webpack.config.js ressemble à ceci:

 var webpack = require('webpack'); var path = require('path'); var HtmlWebpackPlugin = require("html-webpack-plugin"); var nodeModulesDir = path.resolve(__dirname, './node_modules'); // Some of my dependencies that I want // to skip from building in DEV environment var deps = [ 'angular/angular.min.js', ... ]; var config = { context: path.resolve(__dirname, './app'), entry: ['webpack/hot/dev-server', './main.js'], resolve: { alias: {} }, output: { path: path.resolve(__dirname, './build'), filename: 'bundle.js' }, // This one I am using to define test dependencies // directly in the modules plugins: [ new webpack.DefinePlugin({ ON_TEST: process.env.NODE_ENV === 'test' }) ], module: { preLoaders: [ {test: /\.coffee$/, loader: "coffeelint", exclude: [nodeModulesDir]} ], loaders: [ {test: /\.js$/, loader: 'ng-annotate', exclude: [nodeModulesDir]}, {test: /\.coffee$/, loader: 'coffee', exclude: [nodeModulesDir]}, ... ], noParse: [] }, devtool: 'source-map' }; if (process.env.NODE_ENV === 'production') { config.entry = { app: path.resolve(__dirname, './app/main.js'), vendors: ['angular'] }; // config.output.path = path.resolve(__dirname, './dist'); config.output = { path: path.resolve(__dirname, "./dist"), filename: "app.[hash].js", hash: true }; config.plugins.push(new webpack.optimize.UglifyJsPlugin()); config.plugins.push(new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.[hash].js')); config.plugins.push(new HtmlWebpackPlugin({ title: 'myApp', template: path.resolve(__dirname, './app/index.html'), inject: 'body' })); delete config.devtool; } else { deps.forEach(function (dep) { var depPath = path.resolve(nodeModulesDir, dep); config.resolve.alias[dep.split(path.sep)[0]] = depPath; config.module.noParse.push(depPath); }); } module.exports = config; 

Mon main.js ressemble à ceci:

 var angular = require('angular'); if(ON_TEST) { require('angular-mocks/angular-mocks'); } require('./index.coffee'); 

Et index.coffee containt module angular principal:

 ngModule = angular.module 'myApp', [] require('./directive/example.coffee')(ngModule)