2016-02-17 110 views
2

所以我一直在使用knockout.js为我正在处理的特定chrome扩展做数据绑定。我认为转移到框架(如Angular)可能是有意义的。使用npm安装我的角度的所有依赖项后,node_module文件夹超过100 MB。这显然太大而不能包含在扩展中,并且已经安装在每个用户机器上。关于如何使用Angular作为我的扩展的任何建议,使得它不需要客户端机器上的数百MB文件?对Chrome扩展使用Angular.js

回答

1

没有必要列入bower_componentsnode_modules在你的Chrome扩展文件夹。尝试使用Grunt/Gulp进行缩小。

Your Repository应该包含一个dist文件夹,其中包含您的扩展的生产就绪状态。当您将扩展程序上传到Chrome网上应用店时,您应该创建该文件夹的ZIP。

使用下面咕噜插件优化应用程序,

grunt-usemin - 将提取的index.html所有样式表或脚本,并将它们合并成一个单一的CSS或JS文件,所以你不必担心关于node_modules或bower_components文件夹。

grunt-contrib-uglify - 将uglify /缩小JS文件。

简而言之,将您的Chrome扩展程序视为任何真实世界的产品Angular应用程序,它通常包含一个包含代码优化版本的分发文件夹。您将将此文件夹中的内容部署到生产环境中,而不是整个存储库。

您可以参考我曾参与过的Chrome扩展,在Github上将其命名为Browser Automation Tookit。您可以检查Gruntfile.jsdist文件夹以获取进一步指导。

https://github.com/kensplanet/browser-automation-toolkit

+0

谢谢你的建议...制定出伟大的! –

+0

@kensplanet是否有任何理由使用grunt over chrome扩展?你怎么看? –

+1

@NikitaChernykh没有没有特别的理由在Angular 1.xxx上使用Grunt over Gulp。如果您使用的是Angular 4,默认情况下支持Webpack。 – kensplanet

0

当您使用客户端依赖NPM你应该只包括DIST文件。 (例如角度 - /node_modules/angular/angular.js)

通常这些文件只会减少几kb。 如果他们暴露这样的(/node_modules/angular/angular**.min**.js)或通过你自己缩小它,你可以使用任何任务运行器(grunt/gulp)

此外,我会强烈建议你不要重新发明轮子和一个自耕农或都能运行一个项目,像种子开始:https://github.com/yeoman/generator-chrome-extension