最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. 创建library 完整代码 核心代码为 output: { path: DIST_PATH, publicPath: "", chunkFilename: "[name].js", filename: "testPlugin.js", librar

前言 我们的目标是利用webpack搭建一个基于react + react-router +dva + es6 + less + antd用于中后台开发的脚手架,同学们可能会说社区里那么多优秀的脚手架为什么还要自己搭,而且网络上这类文章也非常的多,没有再重复写的必要,但是对我而言,分享也是再次学习的过程,只有自己动手实现一遍才会使印象更加深刻,总的来说基本秉持一个理念:在学习中分享,在分享中学习. 初始化项目 新建index.js和index.html文件: 安装webpack并配置 安装web

1.安装sinopia包 npm install -g sinopia 如果是Windows系统用上面的方式安装sinopia很有可能报错,推荐使用下面方式安装: npm install sinopia --no-optional --no-shrinkwrap 在Windows下的依赖crypt3和FS-EXT可能无法编译和不可用.它们是可选的,不会影响Sinopia的使用.我们使用上面的安装方式 2.配置npm npm set registry http://localhost:4873/

React 如何搭建脚手架   npm install -g create-react-app    //安装 create-react-app react-demo    // react-demo 项目的名称 cd react-demo   //cd  进入下一级 npm start    //npm run start 搭建成功显示: 问题·1:端口占用 解决方案:关闭相应进程 在进程中,点击查看——>选择列勾选进程标识符,结束对应的pid的进程 问题2:npm版本过高问题 出现类似这样的

自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些却不太适合,或者我们就是想要去尝试新的框架.比如最近我就尝试着使用了webpack+react+es6的方式开发项目,感觉很不错,然后很多项目都用了这种方式.所以为了不需要每次开发的时候都从头开始新建文件,就想着能不能弄个工具,使用命令能够快速的生成这样一套跑的通的项目模版,正好,有个工具叫yeom

前言 最近主要在写前端的模板类项目,由于其中的webpack配置和引进数据注入ejs模板的方法大同小异,所以萌发出把该模板框架提取出来作为一个常用的脚手架,也方便以后同事可以进行复用. 之前在看<前端工程化:体系设计与实践>里面有提到过Yeoman构建脚手架,先入为主,所以就用了Yeoman来搭建自己的脚手架 准备 1,node环境 在终端上运行node -v,如果显示node版本号,说明已有node环境 2,安装Yeoman工具集 npm install --global yo 验证是否已经

本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思维在调试的时候显得尤为重要,拥有良好的编程习惯和思维能力可以大幅度提高调试效率.而编程思维的培养往往需要经验的积累,只有把底层原理一遍遍地思考之后,才会有更深入的理解,这也是vue官方文档中不建议vue初学者直接使用vue-cli的原因之一. 所以今天特意一步步通过webpack配置,实现与vue-

关于如何使用cnpm搭建私有的npm仓库看这里→ http://blog.fens.me/nodejs-cnpm-npm/ 我本人还没有机会真正实践操作过,公司的npm仓库是我老大搭建的,我这里仅仅记录关于如何发布npm包以及在这过程中出现的问题以及解决的方案. 因为官方的npm上的模块是完全开源,但是公司自己项目有些模块与业务或者逻辑以及一些配置模块肯定不能开源啊,所以需要搭建私有的npm仓库. 1.准备工作 首先安装好npm 以及 cnpm . 现在安装node.js 里会一起安装好npm.

发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转. 初始化项目 mkdir reverse-color-loader cd ./reverse-color-loader npm init 新建 index.js,手写一个 webpack loader 实现颜色反转.webpack loader 开发文档查看 编写一个 loader module.exports = function (source) { var newSource = so

一.初始化一个npm包 1.新建一个文件夹(名称随意,建议和报名一致),输入命令 :npm init -y 会自动生成一个包的说明文件 package.json如下(本文以scroll-antd-table为例): { "name": "scroll-antd-table",//包的名称用于别人 npm install xxxx的时候使用 "version": "1.0.0",//包的版本号 "description

介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 安装node.js 从node官网下载并安装node,安装步骤很简单,只要一路"next"就可以了.安装完成后,打开命令行工具输入命令node -v,如下图,如果出现对应版本号,就说明安装成功了. 我们所需要的npm包管理器,是集成在node中的,所以,直接输入npm -v就会如下图所示,显示出npm的版本信

随着Vue.js越来越火爆,更多的项目都用到Vue进行开发,在实际的开发项目中如何搭建脚手架呢?今天就来跟大家分享一下如何使用vue-cli搭建脚手架. 一.安装node.js 1.进入官网https://nodejs.org/en/download/ 根据电脑操作系统,选择相应版本的文件进行下载. 2.下载文件后双击进行安装 安装完成以后进入node.js的安装目录:D:\Program Files\nodejs\(这里是我本机安装的目录,其他机器目录可能不同),你会发现里面自带了npm,直接

前言 我这里是写了一个vue轮播图插件,因此我使用了vue的脚手架工具创建一个项目,当然你也可以选择自己搭建脚手架. 本例中我会使用vue脚手架创建一个项目,并发布到npm上面去. 通过脚手架创建项目 全局安装 首先,要创建项目,封装vue的插件用webpack-simple很合适,因此你需要全局安装@vue/cli-init插件: yarn global add @vue/cli-init //或者 npm install @vue/cli-init -g 使用vue init webpack

开篇 很多人都或多或少使用过 webpack,但是很少有人能够系统的学习 webpack 配置,遇到错误的时候就会一脸懵,不知道从哪查起?性能优化时也不知道能做什么,网上的优化教程是不是符合自己的项目?等一系列问题!本文从最基础配置一步步到一个完善的大型项目的过程.让你对 webpack 再也不会畏惧,让它真正成为你的得力助手! 本文从下面几个课题来实现 课题 1:初探 webpack?探究 webpack 打包原理 课题 2:搭建开发环境跟生产环境 课题 3:基础配置之loader 课时 4:

Vue2.0搭建Vue脚手架(vue-cli) 此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单加以说明 说明: 在网上找了很多的搭建脚手架教程,但都不求甚解.终于找到2个比较好的教程,读者可对比阅读1和2,在这里分享给大家,希望对初学者有所帮助. ps:高手请绕道. 一.那么我们就从最简单的环境搭建开始: 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步

前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一遍. vue上手相对react来说是比较简单的,对于vue的基本指令以及语法,应该没有什么能比官网更详细,更生动的了.仔细想来,vue值得一说的,在项目中会让新手感到困惑的,是vue的组件,今天就最近工作中用到的一个pdf查看组件,和大家聊聊vue的组件.最后会讲如何将自己的代码封装成一个npm包,

一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分钟的时间就可以运行起来并带有热重载.保存时 lint 校验,以及生产环境可用的构建版本.更多详情可查阅 Vue CLI 的文档. 个人理解:在实际开发中都是通过脚手架快速搭建一个vue项目,当然也可以使用CDN的方式(具体请看官网) 使用脚手架的好处: 1. 脚手架是通过webpack搭建的开发环境

原文转自http://blog.csdn.net/Shiyaru1314/article/details/54963027 目录(?)[-] 1 安装之前需要检查是否已经安装NodeJS的环境 安装文件下载地址httpsnodejsorgen 下载得到压缩文件node-v694-c64msi 双击进行安装 查看安装目录 nodejs就安装完成 2安装vue-cli 3基本使用 4模板 推荐的工具包   使用 Vue.js 开发大型应用时,我们需要考虑代码目录结构.项目构建和部署.热加载.代码单元

简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 webpack 配置文件时,面对各种配置项不知如何下手,本文会介绍如何使用 webpack 手动搭建一个 react 项目. 新建工程 1.先新建一个 demo 项目,项目目录结构为: 2.在工程根目录新建 index.html 文件 <!DOCTYPE html> <html lang=&qu

前提: 1.  借助Node.js环境里的npm来安装, 2.  设置好npm镜像, (比如淘宝的npm镜像:输入 引用 npm install -g cnpm –registry=https://registry.npm.taobao.org 即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了 ), ==============或 者============ (配置指向源,通过 npm 命令指定下载源) 引用 npm config set registry http://re