[web] npm 、webpack 、 babel
#npm publish
npm init
npm adduser
npm publish
-f 或 --force 强制install或 publish
提升版本号
```
npm version patch
```
```
major 主要更新
x.0.0
minor 次要更新
0.x.0
patch 补丁
0.0.x
prerelease 预览版
0.0.0-x
```
```
1.1.1：精确下载安装1.1.1版本的包
>、<=、>、>=1.1.1：分别表示下载安装大于、小于等于、大于等于1.1.1版本的包
1.0.1-1.1.1：表示版本范围是包含1.0.1到1.1.1版本的包
~1.1.1：表示尽量采用靠近1.1.1版本的包，但可用的包版本范围是1.1.1-0到1.1.x-x版本的包
~1.1：表示下载安装1.1.x-x版本的包
~1：表示下载安装1.x.x-x版本的包
^1.1.1：表示包版本范围是1.1.1到1.x.x-x
^0.1.1：表示包版本范围是1.1.1到1.1.x-x
^1.1：表示包版本范围是1.1.x-x到1.x.x-x
^1：表示包版本范围是1.x.x-x
空格、x、*：表示任意版本即可
两个版本选择器间，空格表示and关系，||表示or关系。
```
使用镜像
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
中国镜像站: http://registry.cnpmjs.org
官方站: http://registry.npmjs.org
淘宝镜像：https://registry.npm.taobao.org/
删除镜像
npm config delete registry
npm config delete disturl
或者
npm config edit
进行编辑
使用定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
//不推荐用
npm install -g cnpm --registry=https://registry.npm.taobao.org
#20160603
npm install webpack -g npm install webpack --save-dev npm i webpack --save-dev //也可以这么写，i是install的简写 A prettier output： webpack --progress --colors Watch mode： webpack --progress --colors --watch npm install react --save-dev npm install react-dom --save-dev npm install babel-preset-react --save-dev npm install babel-core --save-dev npm install babel-loader --save-dev npm install babel-preset-es2015 --save-dev //es6 npm i babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev npm install --save-dev babel-preset-stage-1 --save-dev npm install babel-plugin-transform-class-properties --save-dev //为了支持ES6的class以及其他非标准化的语法 npm i redux react-redux --save-dev //redux npm i css-loader style-loader --save-dev //加载CSS文件 npm i file-loader url-loader --save-dev //加载图片 npm i html-webpack-plugin --save-dev //创建HTML文件插件 npm i open-browser-webpack-plugin --save-dev //编译后创建本地服务器，然后自动在浏览器打开HTML插件。这个插件感觉没卵用 npm i bundle-loader --save-dev //单独打包? npm i jquery --save-dev //jq npm i antd --save-dev // ant-design npm install webpack-dev-server -g //这里老是出错，但是不装貌似又不行 npm install webpack-dev-server --save-dev webpack-dev-server //虚拟运行。热编译JS部分 webpack //实际打包 http://localhost:8080/webpack-dev-server 两种方式 Hot Module Replacement ①运行命令 webpack-dev-server --hot --inline ②config 里 配置 entry等 npm i react-router --save-dev //安装react-router npm install webpack react react-dom babel-core babel-preset-react babel-loader babel-preset-es2015 --save-dev npm install webpack webpack-dev-server react react-dom babel-core babel-preset-react babel-loader babel-preset-es2015 --save-dev webpack-dev-server --progress --colors echo { "presets": ["react"] } > .babelrc or in package.json "babel": { "presets": ["react"] } webpack.config.js module.exports = { entry: "./main.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ {test: /\.js$/, loader: "babel"} ] } }; module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' }] } };
webpack
npm install webpack -g
npm install webpack --save-dev
npm install css-loader style-loader --save-dev //引入css
npm install url-loader --save-dev //引入img
webpack
A prettier output
webpack --progress --colors
Watch mode
webpack --progress --colors --watch
Development server:
npm install webpack-dev-server --save-dev //本地环境
webpack-dev-server --port 82 --hot --inline //?
webpack-dev-server --progress --colors
http://localhost:8080/webpack-dev-server/bundle
webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
#
module.exports = { entry: "./index.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" } ], loaders: [ { test: /\.png$/, loader: "url" } ] } };
#
//webpack.config.js const path = require('path'); const PATHS = { app: path.join(__dirname, 'src'), build: path.join(__dirname, 'build') }; module.exports = { devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, stats: 'errors-only', host: '0.0.0.0', port: 3000, publicPath: '/build/' }, entry: PATHS.app, output: { path: PATHS.build, filename: 'bundle.js' }, resolve: { root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')], extensions: ['', '.js', '.jsx'] }, module: { loaders: [{ test: /\.css$/, loaders: ['style', 'css', 'postcss'], include: PATHS.app }, { test: /\.jsx?$/, loader: 'babel', include: PATHS.app }, { test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/, loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]' }] } };
#
//.babelrc { "presets": [ "stage-0", "react", "es2015" ], "plugins": [ "transform-class-properties" ], "env": { "development": {} } }
#
const path = require('path');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const isDev = (process.env.NODE_ENV === 'development');
const PATHS = {
app: path.join(__dirname, 'src'),
node_modules: path.join(__dirname, 'node_modules'),
antd: path.join(__dirname, 'node_modules/antd'),
build: path.join(__dirname, 'build')
};
module.exports = {
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
host: '0.0.0.0',
port: 3000
},
entry: PATHS.app,
output: {
path: PATHS.build,
filename: 'bundle.js',
publicPath: 'build/'
},
resolve: {
root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
extensions: ['', '.js', '.jsx', '.styl']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("commons", "commons.js")
//new webpack.optimize.UglifyJsPlugin(),
//isDev ? new ExtractTextPlugin("app.css", {allChunks: true}) : new ExtractTextPlugin("app.css", {allChunks: true})
],
module: {
loaders: [{
test: /\.styl$/,
loader: "style-loader!css-loader!postcss-loader!stylus-loader"
}, {
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}, {
test: /\.jsx?$/,
loader: 'babel',
include: PATHS.app
}, {
test: /\.(eot|woff|woff2|ttf|otf|svg|png|jpg)$/,
loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}, {
test: /\.json$/,
loader: 'json'
}]
},
postcss: [autoprefixer({browsers: ['> 5%']})]
};
Babel
Babel will look for a .babelrc in the current directory of the file being transpiled. If one does not exist, it will travel up the directory tree until it finds either a .babelrc, or a package.json with a "babel": {} hash within.
npm install webpack -g
npm install webpack --save-dev
npm install react --save-dev
npm install react-dom --save-dev
npm install babel-preset-react --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
echo { "presets": ["react"] } > .babelrc
or in package.json
"babel": {
"presets": ["react"]
}
webpack.config.js
module.exports = {
entry: "./main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{test: /\.js$/, loader: "babel"}
]
}
};
#
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, '../src/client/scripts/client.js'),
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /src\/.+.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
};
1、npm install moduleNames：安装Node模块
安装完毕后会产生一个node_modules目录，其目录下就是安装的各个node模块。
node的安装分为全局模式和本地模式。
一般情况下会以本地模式运行，包会被安装到和你的应用程序代码的本地node_modules目录下。
在全局模式下，Node包会被安装到Node的安装目录下的node_modules下。
全局安装命令为$npm install -g moduleName。
获知使用$npm set global=true来设定安装模式，$npm get global可以查看当前使用的安装模式。
示例：
npm install express
默认会安装express的最新版本，也可以通过在后面加版本号的方式安装指定版本，如npm install express@3.0.6
npm install <name> -g
将包安装到全局环境中
但是代码中，直接通过require()的方式是没有办法调用全局安装的包的。全局的安装是供命令行使用的，就好像全局安装了vmarket后，就可以在命令行中直接运行vm命令
npm install <name> --save
安装的同时，将信息写入package.json中项目路径中如果有package.json文件时，直接使用npm install方法就可以根据dependencies配置安装所有的依赖包，这样代码提交到github时，就不用提交node_modules这个文件夹了。
2、npm view moduleNames：查看node模块的package.json文件夹
注意事项：如果想要查看package.json文件夹下某个标签的内容，可以使用$npm view moduleName labelName
3、npm list：查看当前目录下已安装的node包
注意事项：Node模块搜索是从代码执行的当前目录开始的，搜索结果取决于当前使用的目录中的node_modules下的内容。$ npm list parseable=true可以目录的形式来展现当前安装的所有node包
4、npm help：查看帮助命令
5、npm view moudleName dependencies：查看包的依赖关系
6、npm view moduleName repository.url：查看包的源文件地址
7、npm view moduleName engines：查看包所依赖的Node的版本
8、npm help folders：查看npm使用的所有文件夹
9、npm rebuild moduleName：用于更改包内容后进行重建
10、npm outdated：检查包是否已经过时，此命令会列出所有已经过时的包，可以及时进行包的更新
11、npm update moduleName：更新node模块
12、npm uninstall moudleName：卸载node模块
13、一个npm包是包含了package.json的文件夹，package.json描述了这个文件夹的结构。访问npm的json文件夹的方法如下：
$ npm help json
此命令会以默认的方式打开一个网页，如果更改了默认打开程序则可能不会以网页的形式打开。
14、发布一个npm包的时候，需要检验某个包名是否已存在
$ npm search packageName
15、npm init：会引导你创建一个package.json文件，包括名称、版本、作者这些信息等
16、npm root：查看当前包的安装路径
npm root -g：查看全局的包的安装路径
17、npm -v：查看npm安装的版本
浙公网安备 33010602011771号