Comment utilisez-vous Webpack et AngularJS ensemble, et qu'en est-il du chargement des modèles et de la récupération à la demande des ressources?
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 sur ce dépôt github . Le code a été généreusement adapté de ce packetloop git repo .
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/<plugin>') 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 le app.js
Principal, vous procédez comme suit:
app/vendor/angular.js
'use strict';
if (!global.window.angular) {
require('bower/angular/angular');
}
var angular = global.window.angular;
module.exports = angular;
Et puis utilisez-le 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? Existe-t-il un moyen plus simple de procéder? J'ai vu quelques articles (pas beaucoup selon les normes) qui énuméraient une autre méthode.
De ce commentaire de poste reddit
// Add to webpack.config.js#module#loaders array
{
test: /[\/]angular\.js$/,
loader: "exports?angular"
}
Il existe également un autre plugin en cours de développement, à stackfull/angular-seed . Il semble aller dans la bonne direction, mais il est vraiment très difficile à utiliser en ce moment.
Webpack est vraiment génial, mais le manque de documentation et d'échantillons le tue.
Vous pouvez simplement exiger angular angulaire dans tous les modules (fichiers) où vous en avez besoin. J'ai un dépôt github avec un exemple comment faire cela (également en utilisant webpack pour la construction) Dans l'exemple, la syntaxe d'importation ES6 est utilisée mais cela n'a pas d'importance, vous pouvez utiliser la fonction require()
standard à la place.
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 par Angular + Flux
avec Webpack
alors je peux peut-être vous aider avec certaines choses.
Fondamentalement, j'installe tout avec NPM
, il a module export
système, donc ça marche comme rien. (Vous pouvez utiliser export-loader
, mais pourquoi si vous n'en avez pas besoin.)
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 main angular:
ngModule = angular.module 'myApp', []
require('./directive/example.coffee')(ngModule)