我目前正在使用https://github.com/ng-bootstrap/ng-bootstrap https://github.com/ng-bootstrap/ng-bootstrap在我的 angular2 应用程序中并使用 webpack2 构建所有 ts 文件。
我现在只使用 NgbModule 中的模态组件,但在缩小的文件中我仍然可以看到 NbgAccordian 和其他模块引用,这些引用在我的应用程序中未使用
@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.15
i tried import { NgbModule, NgbModal, NgbModalOptions, ModalDismissReasons, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
但也没有按预期工作。这与树摇动或 Ngbmodule 的编写方式有关吗?省略未使用模块的任何选项vendor.js
file
供应商.ts
// Angular
import '@angular/core';
import '@angular/common';
import '@angular/forms';
import '@angular/http';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/router';
// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
import '@ng-bootstrap/ng-bootstrap';
import 'moment/moment';
import 'angular2-toaster/angular2-toaster';
import 'angular2-moment';
import 'ng2-tag-input';
import 'ng2-img-cropper';
webpack.prod.js
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var CompressionPlugin = require("compression-webpack-plugin");
var helpers = require('./helpers');
var packageJson = require('../../package.json');
var version = packageJson.version;
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
var drop_console = true;
//https://github.com/mishoo/UglifyJS2#mangle
//https://github.com/mishoo/UglifyJS2#compressor-options
https://github.com/mishoo/UglifyJS2
module.exports = webpackMerge(commonConfig, {
devtool: "source-map",
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
options: {
/**
* Html loader advanced options
*
* See: https://github.com/webpack/html-loader#advanced-options
*/
// TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
htmlLoader: {
minimize: true,
removeAttributeQuotes: false,
caseSensitive: true,
customAttrSurround: [
[/#/, /(?:)/],
[/\*/, /(?:)/],
[/\[?\(?/, /(?:)/]
],
customAttrAssign: [/\)?\]?=/]
}
}
}),
new webpack.NoErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
minimize: true,
sourceMap: true,
// Don't beautify output (enable for neater output)
beautify: false,
// Eliminate comments
comments: false,
mangle: {
toplevel : true,
screw_ie8: true,
keep_fnames: false
},
compress: {
screw_ie8: true,
dead_code : true,
unused : true,
warnings: false,
// Drop `console` statements
drop_console: drop_console
}
}),
new CompressionPlugin({
regExp: /\.css$|\.html$|\.js$|\.woff$|\.map$/,
algorithm: "gzip",
threshold: 2 * 1024,
minRatio: 0.8
}),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
})
]
});
----------------------------- 2017 年 4 月 20 日更新 -------------- --------
必须更新我的模块和组件文件以导入文件的深层链接引用而不是 root,以从 ng bootstrap 中排除未使用的模块
应用程序模块.ts
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';
import { NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap/tooltip/tooltip.module';
import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap/alert/alert.module';
应用程序组件.ts
import {NgbModal, NgbModalOptions} from '@ng-bootstrap/ng-bootstrap/modal/modal';
import { ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap/modal/modal-dismiss-reasons';
import { NgbActiveModal} from '@ng-bootstrap/ng-bootstrap/modal/modal-ref';
import { NgbTooltipConfig } from "@ng-bootstrap/ng-bootstrap/tooltip/tooltip-config";
供应商.ts
import { NgbModalModule, NgbModal, NgbModalOptions, ModalDismissReasons, NgbActiveModal, NgbTooltipModule, NgbTooltipConfig, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
------ 进一步更新 ------------
遵循树摇动配置
https://github.com/Andrey-Pavlov/angular2-webpack-starter/blob/d0a225851e6d63b03a21ad6b7a71552a941229ef/config/webpack.common.js#L220 https://github.com/Andrey-Pavlov/angular2-webpack-starter/blob/d0a225851e6d63b03a21ad6b7a71552a941229ef/config/webpack.common.js#L220