Angular1.x + ES6 开发

[giscafer]

Angular 1.x和ES6的结合 https://github.com/xufei/blog/issues/29

Angular1.x + ES6 开发风格指南 https://github.com/kuitos/kuitos.github.io/issues/34

[giscafer]

使用Webpack打包时，controller的类名被压缩混淆后出错。通过以下方式解决

UglifyJsPlugin will change the class.name property

/**
     * compress js
     */
    new webpack.optimize.UglifyJsPlugin({
        compress: {
             warnings: false
        },
        mangle: {
            except: ['$super', '$', 'exports', 'require', 'angular'],
            keep_fnames: true//it works
        }
    }),
`

[heidsoft]

在使用压缩配置如下： mangle: { except: ['$super', '$', 'exports', 'require', 'angular'], keep_fnames: true//it works } 仍旧出现一段错误： angular.js:13920 Error: [$injector:unpr] Unknown provider: eProvider <- e http://errors.angularjs.org/1.5.8/$injector/unpr?p0=eProvider%20%3C-%20e at http://localhost:9797/assets/scripts/angular/angular.js:68:12 at http://localhost:9797/assets/scripts/angular/angular.js:4511:19 at Object.getService [as get] (http://localhost:9797/assets/scripts/angular/angular.js:4664:39) at http://localhost:9797/assets/scripts/angular/angular.js:4516:45 at getService (http://localhost:9797/assets/scripts/angular/angular.js:4664:39) at injectionArgs (http://localhost:9797/assets/scripts/angular/angular.js:4688:58) at Object.instantiate (http://localhost:9797/assets/scripts/angular/angular.js:4730:18) at $controller (http://localhost:9797/assets/scripts/angular/angular.js:10369:28) at Object. (http://localhost:9797/assets/scripts/ui-router/angular-ui-router.js:4250:30) at http://localhost:9797/assets/scripts/angular/angular.js:1247:18

[giscafer]

@heidsoft 这可能是代码问题了，可能需要注入的时候没注入，在打包部署的时候会出错，我举个例子

正确写法

.config(['uiNotificationProvider', uiNotificationProvider => {
        uiNotificationProvider.setOptions({
            delay: 10000
        });
    }])

如果上边代码写成 如下

  .config((uiNotificationProvider)=> {
        uiNotificationProvider.setOptions({
            delay: 10000
        });
    })

在热部署（非build）启动，项目是正常的，因为没有压缩，找得到uiNotificationProvider服务，但是等build之后就会出现uiNotificationProvider找不到了。

其他地方类似，需要依赖注入的时候标记明确依赖注入（针对ES6写法）

可参考我的一个工程环境： https://github.com/giscafer/angular-webpack-es6

[heidsoft]

@giscafer 谢谢，我试试

[heidsoft]

@giscafer 比如我想买依赖类似

amcharts angular angular-animate angular-breadcrumb angular-cookies angular-file-upload angular-legacy-sortablejs angular-resource angular-route angular-touch angular-ui-bootstrap angular-ui-grid angular-ui-tree bootbox bootstrap bootstrap-datetimepicker bootstrap-hover-dropdown bootstrap-table bootstrap-treeview bootstrapValidator 这么多第三方库，有些不是npm安装的，是直接拷贝过来的，那怎么用webpack打包，有什么好方法？

[giscafer]

@heidsoft 举个例子

'use strict'

var accordion = require("./accordion");
var buttons = require("./buttons");
var carousel = require("./carousel");
var collapse = require("./collapse");
var dateparser = require("./dateparser");
var debounce = require("./debounce");
var dropdown = require("./dropdown");
var isClass = require("./isClass");
var modal = require("./modal");
var pager = require("./pager");
var pagination = require("./pagination");
var paging = require("./paging");
var popover = require("./popover");
var position = require("./position");
var progressbar = require("./progressbar");
var rating = require("./rating");
var stackedMap = require("./stackedMap");
var tabindex = require("./tabindex");
var tabs = require("./tabs");
var timepicker = require("./timepicker");
var tooltip = require("./tooltip");
var typeahead = require("./typeahead");


const MODULE_NAME = "demo.app";

angular.module(MODULE_NAME, [accordion,
    buttons,
    carousel,
    collapse,
    dateparser,
    debounce,
    dropdown,
    isClass,
    modal,
    pager,
    pagination,
    paging,
    popover,
    position,
    progressbar,
    rating,
    stackedMap,
    tabindex,
    tabs,
    timepicker,
    tooltip,
    typeahead
]);

export default MODULE_NAME;

上边十多个组件，依赖注入到了模块demo.app下了

[heidsoft]

@giscafer 嗯，你的这些组件是支持commonjs规范的，但是我用的一些js有些没有，比如，bootstrap-table中定义的table指令模块，这时，我用es6 import也是无用的，不知道有什么解决方法

(function () { if (typeof angular === 'undefined') { return; } angular.module('bsTable', []) .constant('uiBsTables', {bsTables: {}}) .directive('bsTableControl', ['uiBsTables', function (uiBsTables) { var CONTAINER_SELECTOR = '.bootstrap-table'; var SCROLLABLE_SELECTOR = '.fixed-table-body'; var SEARCH_SELECTOR = '.search input'; var TOOLBAR_SELECTOR = '.fixed-table-toolbar'; var REFRESH_SELECTOR = 'button[name="refresh"]';

[giscafer]

@heidsoft 不支持自己改一下就可以了。看有没有UMD判断，比如下边的这些判断

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module unless amdModuleId is set
    define('textAngular', ["rangy","rangy/lib/rangy-selectionsaverestore"], function (a0,b1) {
      return (root['textAngular.name'] = factory(a0,b1));
    });
  } else if (typeof exports === 'object') {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory(require("rangy"),require("rangy/lib/rangy-selectionsaverestore"));
  } else {
    root['textAngular'] = factory(rangy);
  }
}(module.exports, function (rangy) {
//……
})

有这些判断就是支持的，没有你就手动改呀，也简单。网上很多js库一般都支持的（现在不支持的建议都不用哦），也可以下载到现成的