Какова наилучшая практика для импорта angularjs с помощью webpack?

Question

Как вы используете Webpack и AngularJS вместе, и как насчет загрузки шаблона и выборки по требованию?

Пример хорошо написанного файла webpack.config.js для этой цели был бы очень признателен.

Все приведенные здесь фрагменты кода можно получить по адресу this github repo. Код был щедро адаптирован от this 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; 

Чтобы импортировать AngularJS в основной app.js вы делаете следующее:

приложение/поставщик/angular.js

'use strict'; 

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

И затем используйте его в app.js, как и так,

app.js

... 
var angular = require('vendor/angular'); 

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

... 

ли следующие правильно? Есть ли более простой способ сделать это? Я видел несколько (не много по стандартам) сообщений, в которых перечислялся другой метод.

От this reddit post comment

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

Существует также еще один плагин, который находится в стадии разработки прямо сейчас, в stackfull/angular-seed. Кажется, это в правильном направлении, но сейчас действительно очень сложно использовать.

Webpack - это потрясающе, но отсутствие документации и образцов убивают его.

Answer 1

Я начинаю с Angular + Flux с Webpack так может быть, я могу помочь вам с некоторыми вещами.

В основном я устанавливаю все с NPM, он имеет систему module export, поэтому он работает как ничто. (Вы можете использовать export-loader, но почему, если вам не нужно.)

Мои webpack.config.js выглядит следующим образом:

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; 

Мои main.js выглядит следующим образом:

var angular = require('angular'); 

if(ON_TEST) { 
    require('angular-mocks/angular-mocks'); 
} 

require('./index.coffee'); 

И index.coffee containt главный угловой модуль:

ngModule = angular.module 'myApp', [] 

require('./directive/example.coffee')(ngModule) 

Answer 2

Вы можете просто потребовать угловой во всех модулях (файлах) там, где это необходимо. У меня есть github repository с примером, как это сделать (также с помощью webpack for build). В примере используется синтаксис импорта ES6, но это не имеет значения, вместо этого вы можете использовать стандартный require().

Пример:

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