웹 팩을 사용하여 angularjs를 Import하기 위한 베스트 프랙티스는 무엇입니까?
웹 팩과 Angular를 사용하는 방법JS를 함께 사용하면 템플릿 로드 및 온디맨드 리소스 가져오기 작업이 어떨까요?
잘 쓴 것의 예webpack.config.js
이 목적을 위해 제출해 주시면 감사하겠습니다.
여기에 표시된 모든 코드 스니펫은 이 github repo에서 액세스할 수 있습니다.이 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
다음 작업을 수행합니다.
app/filename/filename.pilename
'use strict';
if (!global.window.angular) {
require('bower/angular/angular');
}
var angular = global.window.angular;
module.exports = angular;
그리고 나서 그걸app.js
이렇게 해서
app.module
...
var angular = require('vendor/angular');
// Declare app level module
var app = angular.module('myApp', []);
...
다음 내용이 맞습니까?더 쉬운 방법은 없을까?다른 방법을 나열한 게시물을 몇 개(어느 기준에서도 많지는 않음) 본 적이 있습니다.
// Add to webpack.config.js#module#loaders array
{
test: /[\/]angular\.js$/,
loader: "exports?angular"
}
stackfull/angular-seed에서 현재 개발 중인 플러그인도 있습니다.방향은 맞는 것 같지만, 지금은 정말 사용하기 어렵습니다.
웹 팩은 훌륭하지만 문서와 샘플의 부족이 웹 팩을 망치고 있습니다.
필요한 모든 모듈(파일)에 angular가 필요합니다.예를 들어 github 저장소가 있습니다(빌드에 웹 팩 사용).이 예에서는 ES6 Import 구문이 사용되지만 상관없습니다.표준을 사용할 수 있습니다.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);
우선은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는 주요 각도 모듈을 포함합니다.
ngModule = angular.module 'myApp', []
require('./directive/example.coffee')(ngModule)
언급URL : https://stackoverflow.com/questions/28648255/what-is-the-best-practice-for-importing-angularjs-using-webpack
'source' 카테고리의 다른 글
useState는 동기화되어 있습니까? (0) | 2023.02.14 |
---|---|
구체화된 뷰와표:어떤 장점이 있습니까? (0) | 2023.02.14 |
react app을 배포할 때 오류가 발생하여 계속 << 플러그인 "react"가 "package" 간에 충돌했습니다.json l eslint - config - config - app -> (0) | 2023.02.10 |
서버 측 앱 인증에 대한 Google+ 로그인 기능이 작동하지 않습니다. (0) | 2023.02.10 |
플라스크와 함께 Create-React-App으로 만든 프런트 엔드를 제공합니다. (0) | 2023.02.10 |