解析js文件,无法解析的文件需要借助loader
cnpm i webpack --save-dev//最新版本
cnpm i webpack@3.0.0 --save-dev//3.0.0版本
cnpm i webpack@^3.0.0 --save-dev//3.0.0以上4.0.0以下版本
.babelrc 文件:
{
"presets": ["env"]
}
关键index.js
import TipsComponent from './vue-tips.vue'
let Tips={}
//必须install
Tips.install=function(Vue,options){
var opt={}
for(let key in options){
opt[key]=options[key]
}
Vue.prototype.$tips=function(option){
if(typeof option=='object'){
for(let key in option){
opt[key]=option[key]
}
}
//extand继承,实例
const TipsController=Vue.extend(TipsComponent)
//mount挂载,得到新实例
var instance=new TipsController().$mount(document.createElement("div"))
document.body.appendChild(instance.$el)
}
Vue.prototype.$tips['show']=function(option){
Vue.prototype.$tips(option);
}
}
if(window.Vue){
Vue.use(Tips)
}
export default Tips
webpack.config.js
var path=require('path')
module.exports={
entry:'./src/lib/index.js',
output:{
path:path.join(__dirname,'./dist'),
filename:'vue-tips.js'
libraryTarget:'umd',//输出规范,amd\cmd\commonjs
library:'VueTips'//输出
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
scss:'style-loader!css-loader!sass-loader'
}
}
},
{
test:/\.js$/,
loader:'babel-loader',
include:path.join(__dirname,'src'),
exclude:/node_modules/
}
]
},
plugins:[
]
}
1.v-for与数组:增加:push();修改 splice(index,1,val);删除splice(index,1)
2.v-if与关闭功能:
//v-for循环时,选中的当前列(要删除的)不渲染
v-if="currentIndex!=index"
//点击删除
@click="currentIndex=index"
webpack.config.js
var path=require('path')
var htmlWebpackPlugin=require('html-webpack-plugin')
var CleanWebpackPlugin =require('clean-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var webpack=require('webpack')
module.exports={
entry:{
vendor:['jquery','./src/js/common.js'],
index:'./src/js/index.js',
cart:'./src/js/cart.js'
},
output:{
path:path.join(__dirname,'./dist'),
filename:'js/[name].js',
publicPath:''
},
module:{
rules:[
{
test:/\.js$/,
include:path.join(__dirname,'src'),
exclude:/node_modules/,
loader:'babel-loader'
},
{
test: /\.css$/,
include:path.join(__dirname,'src'),
exclude:/node_modules/,
//抽取css文件生成单独的文件,调用
/*use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})*/
loader:'style-loader!css-loader'//将css直接插入到html文件,嵌入文本
}
]
},
plugins:[
//每次webpack时先清除dist
new CleanWebpackPlugin(['./dist'],{
root:path.join(__dirname,''),
exclude:/node_modules/,
verbose:true,
dry:false
}),
//抽取公共模块,index、cart、vendor都包含common
new webpack.optimize.CommonsChunkPlugin({
name:'vendor',
chunks:['index','cart','vendor'],
mikChunks:3
}),
//压缩js
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:true//注释不压缩掉
}
}),
//HTML页面生成,多个
new HtmlWebpackPlugin({
filename:'index.html',
template:'./src/index.html',
chunks:['index','vendor'],//引用的js
//压缩,注释空格
minify:{
removeComments:true,
collapseWhitespace:true
}
}),
new HtmlWebpackPlugin({
filename:'cart.html',
template:'./src/cart.html',
chunks:['cart','vendor'],
minify:{
removeComments:true,
collapseWhitespace:true
}
}),
//抽取文本
new ExtractTextPlugin('css/base.css'),
//全局配置jquery
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
'window.jQuery':'jquery'
})
],
//devtool:'#source-map'
}
从架构的角度来看,将大型单体代码库拆分为较小的、独立封装的一系列模块通常是个好方法。从微服务到可复用组件库,很多技术都很适合模块化。但从版本发布和源代码管理的角度来看,它也可能是一场噩梦。
这篇文章要求你有一定的 JS 、TS 和 NPM 的知识,如果你写过普通的 NPM 包就更好啦~如果没有的话网上也很多教程的,都很简单~发布过 npm 包的同学都知道,初始化一个 npm 项目,直接用 npm init -y 就可以了,那如果要用 ts 呢,直接 tsc --init 即可。
抽空写了一个 textarea,打算发布到 npm 的时候却遇到了问题,之前用 vue-cli 2.x 的时候,打包配置项非常透明,可以很容易的修改,但升级到 vue-cli 3.x 之后,反而一脸懵逼
关于 npm run eject 报错的问题,昨天新开React的项目, 刚刚一上手就碰到问题,解决方法(前提你有git).出错的原因:应该是git没有安装好,或者代码没有提交上git
直接通过&&连接多条命令,在npm run start的时候,发现只停留在第一个命令执行监听,后面的命令都没有执行。只能通过打开多个窗口分别执行多条命令,那么有没有办法实现一条npm命令执行多条监听呢?
使用NPM安装的时候会经常出现包冲突(比如多个主模块的子模块版本不一致等),导致在开发过程中会遇到各种或大或小的问题。所有在这会介绍以下内容:NPM 主要安装方式,NPM 包信息查询
重装电脑系统后,使用npm install初始化项目依赖失败了,经过报错信息查询解决办法,最终找到了两个比较好的方案,在此总结一下,以便下次再遇到此类问题。
npm 是目前js最流行的包管理工具,通过 npm 可以安装、共享、分发代码,管理项目依赖关系。Yarn 是为了弥补 npm 的一些缺陷而出现的,Yarn 定位为快速、可靠、安全的依赖管理工具。
为什么我们需要一个包管理工具?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站
windows安装完nodejs后做了相关环境变量配置后,cmd输入npm没反应就光标一直闪node是正常的。下面我们就来看一下出现这种情况的可能原因与解决方法。node安装好了npm没有反应的原因与解决方法如下:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!