nodejs安装不了和npm安装不了的解决方法-前端开发博客推荐文章 07-04 12-31 11-03 12-21 01-22 03-14热门文章
148,926Views
32,263Views
23,758Views
20,862Views
8,459Views
8,346Views做Web前端开发，总是要考虑页面的打开速度，如果文件数量越少、文件长度越小，就可以直接的提升网页的访问速度。
但在开发的时候，为了保证代码的可读性，我们写的程序文件会很多而且很大，这样就与部署的要求发生背离，通过UglifyJS2这个工具，我们可以在开发完成时，对代码文件进行 合并、混淆、压缩 等的操作，达到最优的访问性能。
1. UglifyJS介绍
开始UglifyJS2介绍之前，我们先要说一下UglifyJS。是UglifyJS2的前身，是一个Javascript开发的通用的语法分析、代码压缩、代码优化的一个工具包。UglifyJS是基于Nodejs环境开发，支持CommonJS模块系统的任意的Javascript平台。
UglifyJS的实现主要分为2部分：
2. UglifyJS2介绍
是作者对UglifyJS的重写，是完全的重写，而不仅仅是升级。从UglifyJS2官司方网页介绍看，UglifyJS2把整个的JS压缩过程，做了更进一步的细化。
上述所有的功能代码API是在6500行的左右，比其他的相同功能的开发包都要小。作者还提供了一个在线版本UglifyJS2的JS压缩工具，，大家可以测试一下。
3. UglifyJS2安装
系统环境：
UglifyJS2的安装非常简单，和Nodejs的其他包一样，全局安装使用如下命令。
npm install uglify-js -g
也可以通过github下载源代码安装。
git clone git:///mishoo/UglifyJS2.git
cd UglifyJS2
我们在使用UglifyJS2的时候主要有2种方式，一种是通过命令行操作，对指定的JS文件进行压缩；另一种是通过程序的API调用，对文件或内存中的JS代码进行压缩。下面我将分两种情况进行介绍。
4. UglifyJS2命令操作
在全局安装好UglifyJS2以后，我们就可以使用UglifyJS2的命令了。
打印uglifyjs命令行的帮助信息，会打出很长一段说明。
D:\workspace\javascript\nodejs-uglifyJS2&uglifyjs -h
D:\toolkit\nodejs\\node.exe D:\toolkit\nodejs\node_modules\uglify-js\bin\uglifyjs input1.js [input2.js ...] [options]
Use a single dash to read input from the standard input.
NOTE: by default there is no mangling/compression.
Without [options] it will simply parse input files and dump the AST
with whitespace and comments discarded.
To achieve compression and
mangling you need to use `-c` and `-m`.
--source-map
Specify an output file where to generate source
--source-map-root
The path to the original source to be included
in the source map.
--source-map-url
The path to the source map to be added in //#
sourceMappingURL.
Defaults to the value passed
with --source-map.
--source-map-include-sources
Pass this flag if you want to include the
content of source files in the source map as
sourcesContent property.
--in-source-map
Input source map, useful if you're compressing
JS that was generated from some other original
--screw-ie8
Pass this flag if you don't care about full
compliance with Internet Explorer 6-8 quirks
(by default UglifyJS will try to be IE-proof).
Parse a single expression, rather than a
program (for parsing JSON)
-p, --prefix
Skip prefix for original filenames that appear
in source maps. For example -p 3 will drop 3
directories from file names and ensure they are
relative paths. You can also specify -p
relative, which will make UglifyJS figure out
itself the relative paths between original
sources, the source map and the output file.
-o, --output
Output file (default STDOUT).
-b, --beautify
Beautify output/specify output options.
-m, --mangle
Mangle names/pass mangler options.
-r, --reserved
Reserved names to exclude from mangling.
-c, --compress
Enable compressor/pass compressor options. Pass
options like -c
hoist_vars=false,if_return=false. Use -c with
no argument to use the default compression
-d, --define
Global definitions
-e, --enclose
Embed everything in a big function, with a
configurable parameter/argument list.
--comments
Preserve copyright comments in the output. By
default this works like Google Closure, keeping
JSDoc-style comments that contain &@license& or
&@preserve&. You can optionally pass one of the
following arguments to this flag:
- &all& to keep all comments
- a valid JS regexp (needs to start with a
slash) to keep only comments that match.
Note that currently not *all* comments can be
kept when compression is on, because of dead
code removal or cascading statements into
sequences.
--preamble
Preamble to prepend to the output.
You can use
this to insert a comment, for example for
licensing information.
This will not be
parsed, but the source map will adjust for its
Display operations run time on STDERR.
Use Acorn for parsing.
--spidermonkey
Assume input files are SpiderMonkey AST format
(as JSON).
Build itself (UglifyJS2) as a library (implies
--wrap=UglifyJS --export-all)
Embed everything in a big function, making the
“exports” and “global” variables available. You
need to pass an argument to this option to
specify the name that your module will take
when included in, say, a browser.
--export-all
Only used when --wrap, this tells UglifyJS to
add code to automatically export all globals.
Display some scope warnings
-v, --verbose
-V, --version
Print version number and exit.
Don't throw an error for unknown options in -c,
对命令参数进行解释：
通过对命令行各种参数的解释，我们基本上知道了这些参数都是干什么的了，下面我就试一下。
写2个简单地JS文件，demo.js, main.js。
~ vi D:\workspace\javascript\nodejs-uglifyJS2\demo.js
'use strict';
function hello(name){
if(name==='fens.me'){
return &Long time no see, &+
return &hello &+
console.log(hello('Conan'));
console.log(hello('fens.me'));
~ vi D:\workspace\javascript\nodejs-uglifyJS2\main.js
'use strict';
function book(){
{head:'前言',page:'/views/tpl/book-r1/preface.html',active:false},
{head:'目录',page:'/views/tpl/book-r1/contents.html',active:true},
{head:'代码',page:'/views/tpl/book-r1/code.html',active:false},
{head:'试读',page:'/views/tpl/book-r1/sample.html',active:false},
{head:'勘误',page:'/views/tpl/book-r1/mistake.html',active:false}
var tab=function(arr,idx){
for(var i=0;i&arr.i++){
arr[i].active = (idx==i?true:false);
console.log(tab(book(),3));
接下来，用UglifyJS2命令进行操作，合并两个文件，对变量名用单字母替换，进行压缩，所有代码合并到一个函数，生成source map，指定source map来源网站。
D:\workspace\javascript\nodejs-uglifyJS2&uglifyjs main.js demo.js -o foo.min.js --source-map foo.min.js.map --source-map-root http://onbook.me -p 5 -c -m --wrap --export-all
在当前目录生成了2个新文件：foo.min.js.map, foo.min.js，分别查看这两个文件。
foo.min.js
!function(e,t){&use strict&;function o(){return[{head:&前言&,page:&/views/tpl/book-r1/preface.html&,active:!1},{head:&目录&,page:&/views/tpl/book-r1/contents.html&,active:!0},{head:&代码&,page:&/views/tpl/book-r1/code.html&,active:!1},{head:&试读&,page:&/views/tpl/book-r1/sample.html&,active:!1},{head:&勘误&,page:&/views/tpl/book-r1/mistake.html&,active:!1}]}function n(e){return&fens.me&===e?&Long time no see, &+e:&hello &+e}t[&true&]=e,console.log(a(o(),3));var a=function(e,t){for(var o=0;o
foo.min.js.map{&version&:3,&file&:&foo.min.js&,&sources&:[&?&],&names&:[&exports&,&global&,&book&,&head&,&page&,&active&,&hello&,&name&,&console&,&log&,&tab&,&arr&,&idx&,&i&,&length&,&this&],&mappings&:&CAAC,SAASA,EAASC,GAAnB,YAEA,SAASC,KACL,QACKC,KAAK,KAAKC,KAAK,kCAAkCC,QAAO,IACxDF,KAAK,KAAKC,KAAK,mCAAmCC,QAAO,IACzDF,KAAK,KAAKC,KAAK,+BAA+BC,QAAO,IACrDF,KAAK,KAAKC,KAAK,iCAAiCC,QAAO,IACvDF,KAAK,KAAKC,KAAK,kCAAkCC,QAAO,IANjE,QAASC,GAAMC,GACd,MAAU,YAAPA,EACK,qBAAqBA,EAEtB,SAASA,EANWN,EAAO,QAAUD,EAY7CQ,QAAQC,IAAIC,EAAIR,IAAO,GADvB,IAAIQ,GAAI,SAASC,EAAIC,GACpB,IAAI,GAAIC,GAAE,EAAEA,EAAEF,EAAIG,OAAOD,IACxBF,EAAIE,GAAGR,OAAUO,GAAKC,GAAE,GAAK,CAE9B,OAAOF,GAGRH,SAAQC,IAAIH,EAAM,UAClBE,QAAQC,IAAIH,EAAM,mBAjBTJ,UAAAI,QASLI,MAX8E,WAAW,MAAOK&,&sourceRoot&:&http://onbook.me&}
通过一条简单的命令，就实现了对JS代码的合并、压缩等的操作，确实非常方便。
下载jquery-2.1.1.js文件自己压缩，并与官方的压缩文件进行对比。
~ wget /jquery-2.1.1.js
~ wget /jquery-2.1.1.min.js
~ uglifyjs jquery-2.1.1.js -o jquery-2.1.1.min.uglifyjs2.js -p 5 -c -m
# 比较3个文件大小
-rwx------
mkpasswd 247351 Jul
6 16:26 jquery-2.1.1.js
-rwx------
6 16:32 jquery-2.1.1.min.js
-rwx------
6 16:28 jquery-2.1.1.min.uglifyjs2.js
我在本地压缩的文件jquery-2.1.1.min.uglifyjs2.js，与jquery官司网下载的压缩文件jquery-2.1.1.min.js大小差不多，都在84KB左右。
5. UglifyJS2的API使用
另一种使用方式是，把UglifyJS2包放到程序中，通过API对JS文件或JS代码进行压缩。首先，新建一个NPM项目文件package.json，然后在是下载UglifyJS2依赖包。
新建文件package.json
~ vi D:\workspace\javascript\nodejs-uglifyJS2\package.json
&name&: &nodejs-uglifyjs2&,
&version&: &0.0.1&,
&description&: &uglifyjs2&,
&author&: &Conan Zhang &,
&dependencies&: {
}下载UglifyJS2依赖包D:\workspace\javascript\nodejs-uglifyJS2&npm install uglify-js --save
npm WARN package.json nodejs-uglifyjs2@0.0.1 No readme data!
npm http GET https://registry.npmjs.org/uglify-js
npm http 304 https://registry.npmjs.org/uglify-js
npm http GET https://registry.npmjs.org/async
npm http GET https://registry.npmjs.org/source-map
npm http GET https://registry.npmjs.org/optimist
npm http GET https://registry.npmjs.org/uglify-to-browserify
npm http 304 https://registry.npmjs.org/uglify-to-browserify
npm http 304 https://registry.npmjs.org/optimist
npm http 304 https://registry.npmjs.org/async
npm http 304 https://registry.npmjs.org/source-map
npm http GET https://registry.npmjs.org/wordwrap
npm http GET https://registry.npmjs.org/amdefine
npm http 304 https://registry.npmjs.org/wordwrap
npm http 304 https://registry.npmjs.org/amdefine
uglify-js@2.4.14 node_modules\uglify-js
├── uglify-to-browserify@1.0.2
├── async@0.2.10
├── optimist@0.3.7 (wordwrap@0.0.2)
└── source-map@0.1.34 (amdefine@0.1.0)
我们新建一个文件uglify2.js，用于编写程序。~ vi D:\workspace\javascript\nodejs-uglifyJS2\uglify2.js
'use strict';
var UglifyJS = require('uglify-js');
//代码压缩
var result = UglifyJS.minify(&var b = function () {};&, {fromString: true});
console.log(&\n===========================&);
console.log(result);
//文件压缩
result = UglifyJS.minify([&demo.js&]);
console.log(&\n===========================&);
console.log(result.code);
//多文件压缩，指定source map和网站来源
result = UglifyJS.minify([&main.js&,&demo.js&],{
outSourceMap: &out.js.map&,
sourceRoot: &http://onbook.me&,
mangle:true
console.log(&\n===========================&);
console.log(result.code);
console.log(result.map);
程序输出：D:\workspace\javascript\nodejs-uglifyJS2&node uglify2.js
===========================
{ code: 'var b=function(){};', map: 'null' }
===========================
&use strict&;function hello(e){return&fens.me&===e?&Long time no see, &+e:&hello &+e}var tab=function(e,o){for(var n=0;n
&e.n++)e[n].active=o==n?!0:!1;return e};console.log(hello(&Conan&)),console.log(hello(&fens.me&));
===========================
&use strict&;function book(){return[{head:&前言&,page:&/views/tpl/book-r1/preface.html&,active:!1},{head:&目录&,page:&/v
iews/tpl/book-r1/contents.html&,active:!0},{head:&代码&,page:&/views/tpl/book-r1/code.html&,active:!1},{head:&试读&,page
:&/views/tpl/book-r1/sample.html&,active:!1},{head:&勘误&,page:&/views/tpl/book-r1/mistake.html&,active:!1}]}function he
llo(e){return&fens.me&===e?&Long time no see, &+e:&hello &+e}console.log(tab(book(),3));var tab=function(e,o){for(var t=
0;t&e.t++)e[t].active=o==t?!0:!1;return e};console.log(hello(&Conan&)),console.log(hello(&fens.me&));
//# sourceMappingURL=out.js.map
{&version&:3,&file&:&out.js.map&,&sources&:[&main.js&,&demo.js&],&names&:[&book&,&head&,&page&,&active&,&hello&,&name&,&
console&,&log&,&tab&,&arr&,&idx&,&i&,&length&],&mappings&:&AAAA,YAEA,SAASA,QACL,QACKC,KAAK,KAAKC,KAAK,kCAAkCC,QAAO,IACxD
F,KAAK,KAAKC,KAAK,mCAAmCC,QAAO,IACzDF,KAAK,KAAKC,KAAK,+BAA+BC,QAAO,IACrDF,KAAK,KAAKC,KAAK,iCAAiCC,QAAO,IACvDF,KAAK,KAAKC
,KAAK,kCAAkCC,QAAO,ICNjE,QAASC,OAAMC,GACd,MAAU,YAAPA,EACK,qBAAqBA,EAEtB,SAASA,EDMjBC,QAAQC,IAAIC,IAAIR,OAAO,GCDvB,IAAIQ,
KAAI,SAASC,EAAIC,GACpB,IAAI,GAAIC,GAAE,EAAEA,EAAEF,EAAIG,OAAOD,IACxBF,EAAIE,GAAGR,OAAUO,GAAKC,GAAE,GAAK,CAE9B,OAAOF,GAGR
H,SAAQC,IAAIH,MAAM,UAClBE,QAAQC,IAAIH,MAAM&,&sourceRoot&:&http://onbook.me&}
我们看到用操作uglifyJS2包的API，还是挺简单的，如果对AST树有遍历需求，API提供了非常实用的函数支持。
不过我在测试API过程中,发现有2个问题。
通过本文的介绍，我们基本上了解了uglifyJS2包的功能和使用方法，然后就可以放心大胆地对JS代码进行压缩了。在实际的前端项目中，一般不用自己配置uglifyJS2包，而是通过grunt来调用uglifyJS2进行代码发布前的压缩，关于grunt使用，请参考文章：。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：21426次
排名：千里之外
原创：14篇
转载：12篇
(1)(1)(1)(1)(4)(6)(11)phoneGap跨平（14）
在做androidHybird开发的过程中，一直遇到了一个混淆的问题，不想让其他的开发人员直接的一个解压缩就可以看到一些关键的代码；在做混淆的过程中，尝试把CSS/JS,还有Angularjs/ionic中的Directive、Config、Service、Factory、Controller的混淆；
最后发现，可以压缩混淆的内容只有CSS、js、C其他的代码不能用于混淆；
如果看着觉得我的股观点有有误，请留言，交流一下；
如下就是做压缩混淆的代码的流程：
1、环境的配置
安装了node.js /npm这些内容就不多说，比较做这个还是有这些基础的，自己掌握；
安装Node.js,一直点击下一步:
https://nodejs.org/en/
1.1、安装node的Grunt和基础知识
安装Grunt：
如果你之前安装过老的0.3版本，请先卸载：
npm uninstall -g grunt
安装Grunt命令行（CLI）：
npm install -g grunt-cli
注1：-g代表全局安装，Grunt有二个版本：服务器端版本（grunt）和客户端版本（grunt-cli）。
1.2、创建新的Grunt项目
进入到Android Hybird开发的项目目录中，这个项目也就是本人的项目了，我们主要就是混淆www的项目；如下图：
进入到该目录以后，就可以创建两个Grunt项目的必要文件，
目录下添加两个文件：package.json 和 Gruntfile.js。
package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。
Gruntfile.js:用来配置或定义任务（task）并加载Grunt插件
package.json应当放置于项目的根目录中，与Gruntfile.js在同一目录中。
2、package.json 和 Gruntfile.js两个文件的创建和配置说明
2.1、创建package.json的两种方式
2.1.1 用命令（npm init）自动配置有关的信息
执行npm init 命令（根据默认的grunt-init模板，引导你创建一个“基本”的package.json文件）：
根据提示填写信息（都允为空）：下面的都会自动的弹出来需要你的配置
name: (GruntT) // 模块名称：只能包含小写字母数字和中划线，如果为空则使用项目文件夹名称代替
version: (0.0.0) // 版本号
description: // 描述：会在npm搜索列表中显示
entry point: (index.js) // 模块入口文件
test command: // 测试脚本
git repository: // git仓库地址
keywords: // 关键字：用于npm搜索，多个关键字用空格分开
author: // 作者
license: (BSD-2-Clause) // 开原协议
2.1.2 用手动创建package.json文件的方法配置有关的信息
"name": "oversale2",
"version": "1.0.0",
"author": "liuyongong",
"description":"oversale2 hunxiao",
"dependencies": {
"grunt": "*"
dependencies里面的参数，指定了项目依赖的Grunt和Grunt插件版本。具体数据，如”0.9”代表安装该插件的某个特定版本，如果只需安装最新版本，可以改成”*”。
2.2、创建配置Gruntfile.js文件
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
csslint: {
src: ['www/css/*.css']
all: ['www/app/**/*.js', 'www/js/config.js', 'www/js/directive.js', 'www/js/phonegap.js',
'www/js/show.services.js']
imagemin: {
options: {
optimizationLevel: 3
expand: true,
cwd: 'www/img/',
src: ['**/*.{png,jpg,jpeg}'],
dest: 'www/img/'
['www/css/*.css'],
dest: 'www/css/all.css'
src: ['www/app/**/*.ctrl.js'],
dest: 'www/js/all.js'
options: {
keepSpecialComments: 0
expand: true,
cwd: 'www/css/',
src: ['*.css'],
dest: 'www/css/',
ext: '.min.css'
'www/js/all.min.js': ['www/js/all.js']
files: ['img/**/*.{png,jpg,jpeg}'],
options: {
livereload: true
options: {
event: ['changed', 'added'],
livereload: true
files: ['css/**/*.css']
options: {
livereload: true
files: ['js/**/*.js']
options: {
livereload: true
files: ['*.html']
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['csslint', 'jshint', 'imagemin', 'cssmin', 'concat','uglify']);
3、执行命令和任务
上面的两个文件配置好了以后，这个时候就要创建Grunt插件了；
npm install
这时你会发现项目文件夹中多了个node_modules文件夹，其里面就是对应的Grunt和Grunt插件。
执行任务：
执行配置中所有的任务命令：
上面的这个命令会自动依次执行’csslint’, ‘jshint’, ‘imagemin’, ‘cssmin’, ‘concat’,’uglify’的各个命令；
执行某个特定的任务命令：
grunt csslint
grunt jshint
grunt imagemin
grunt cssmin
grunt concat
grunt uglify
执行上述命令的时候有可能会出现如下的问题：
这个时候需要安装工具，用如下的命令，其他类似：
npm install grunt-contrib-csslint
4、注意事项
在混淆angularjs中的过程中，会出错，要考虑这个方面的问题， 如下：
angular.module('aftersale.ctrl', [])
.controller('aftersaleCtrl', [
"$scope","$log","$cordovaPreferences","$cordovaBarcodeScanner","ShowFactory",
function ($scope, $log, $cordovaPreferences,$cordovaBarcodeScanner,ShowFactory) {
$scope.afterSaleTitle="售后";
$scope.scanBarcode = function()
$cordovaBarcodeScanner.scan().then(function(imageData)
在注入有关的function中的参数的时候，要前面写一个格式，这样就可以找到混淆中参数a/b/c等等代表的含义;
混淆的过程已经讲完了，如有其它的疑问，请留言；
我自己创建的package.json 和 Gruntfile.js的文件代码下载链接如下：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：30806次
排名：千里之外
原创：29篇
评论：10条
(1)(2)(1)(3)(9)(4)(2)(5)(1)(2)(1)