日常工作中使用的都是現(xiàn)階段比較流行的Vue組件庫掉冶，如果自己寫一個的話要怎么去寫？
首先糙及，還是需要腳手架搭建一個Vue項目
npm install vue-cli -g && vue init webpack vue-comps-project
在接下來的安裝選項當中详幽，選項隨意. 項目名稱盡量和目錄名一致，版本號盡量從0.0.1開始，作者要和你在npm上注冊的用戶名一致唇聘。
附npm注冊地址(請自行注冊): https://www.npmjs.com/signup
cd vue-comps-project && npm install
vue-cli生成的目錄結(jié)構(gòu)如下圖：
下面版姑，打開package.json，在scripts里增加兩條腳本命令：
"package:dev": "webpack --config build/package.dev.config.js",
"package:prod": "webpack --config build/package.prod.config.js",
"package": "npm run package:prod && npm publish && npm run build"
可以看的出迟郎，package:dev和package:prod如果被執(zhí)行構(gòu)建剥险，則需要兩個配置文件:package.dev.config.js和package.prod.config.js，那么就建立這兩個文件就好了宪肖，接下來簡單配置一下配置文件:
1表制、在build目錄簡歷package.config.js，內(nèi)容如下：
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
'ydui': './src/packages/index.js'
},
output: {
path: path.resolve(__dirname, '../package'),
publicPath: '/package/',
library: 'ydui',
libraryTarget: 'umd',
umdNamedDefine: true
},
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
resolve: {
extensions: ['.js', '.vue']
},
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: 'vue-style-loader!css-loader',
sass: 'vue-style-loader!css-loader!sass-loader'
},
postLoaders: {
html: 'babel-loader'
}
}
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'autoprefixer-loader'
]
}, {
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=8192'
}]
},
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
}
output中l(wèi)ibrary改成你自己的名字即可匈庭，其他部分都是正常的輸入夫凸、輸出、loader等配置阱持，不做贅述夭拌。
2、在build目錄中建立package.dev.config.js衷咽，內(nèi)容如下：
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./package.config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractScss = new ExtractTextPlugin('/ydui.min.css')
module.exports = merge(baseWebpackConfig, {
output: {
filename: '[name].js'
},
module: {
loaders: [{
test: /\.scss$/i,
loader: extractScss.extract(['css-loader','sass-loader'])
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
}),
extractScss
]
})
利用webpack-merge做兩個配置文件的合并鸽扁，這一塊也沒有什么不好理解的。
3镶骗、在build目錄中簡歷package.prod.config.js
const webpack = require('webpack')
const merge = require('webpack-merge')
const config = require('../config')
const baseWebpackConfig = require('./package.config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractScss = new ExtractTextPlugin('/ydui.min.css')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = merge(baseWebpackConfig, {
output: {
filename: '[name].min.js'
},
module: {
loaders: [{
test: /\.scss$/i,
loader: extractScss.extract(['css-loader','sass-loader'])
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
//new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false,
},
mangle: {
keep_fnames: true
},
compress: {
warnings: false,
drop_console: true
}
}
}),
extractScss,
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
new CopyWebpackPlugin([
// {output}/file.txt
{ from: `./src/packages`,to:`./packages`}
]),
]
})
配置文件基本上就配置好了桶现，下面介紹一下幾個特殊的文件：
1、.babelrc：編譯es6的核心配置文件鼎姊，通常使用stage-3或stage-2骡和，1和0較少；
2相寇、eslintrc.js: 顧名思義eslint配置文件慰于，建議使用，養(yǎng)成良好代碼風格;
3唤衫、.gitignore: git忽略文件的聲明婆赠，避免同步到git倉庫;
4、.npmignore: npm倉庫的忽略文件的聲明佳励，避免發(fā)布到npm源上休里；
本次介紹暫時到這里，下一篇會繼續(xù)說一下目錄結(jié)構(gòu)和如何書寫第一個組件赃承。
