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

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

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

Все приведенные здесь фрагменты кода можно получить по адресу это 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', []);

...

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

От этот комментарий для reddit

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

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

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

Ответ 1

Вы можете просто потребовать angular во всех модулях (файлах), где это необходимо. У меня есть репозиторий github с примером, как это сделать (также с помощью 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);

Ответ 2

Я начинаю с 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 содержит основной модуль angular:

ngModule = angular.module 'myApp', []

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