题记: 一个人的项目,还有工程化的问题嘛?
我们在推进模块化和组件化的过程中,肯定会不断的沉淀出我们项目的模块和组件。对于这些沉淀出的模块和组件怎么管理?另外怎么依赖也是个问题?
你真的想这样嘛?
var BreadCrumb = require(‘../../../../uikit/breadcrumb’); //真心ugly。
之前也尝试了很多的不同的解决方案,最终发现npm2.0的local module是最简单的,而且最符合模块化思维,我们可以把我们的模块按照功能进行划分。
比如:
uikit
— breadcrumb.js
— data-table.js
— search-form.js
...
util
—ajax.js
—pagenation.js
dialog.js
...
这样我们建立自己的模块,然后可以单独的维护,单独提交到git,然后通过npm install来进行本地安装。而且解决了依赖的问题。
对于上面的问题,我们可以简单这样玩:
var BreadCrumb = require(‘uikit/breadcrumb’); //cool.正如我们期待的一般
但是通过我们项目多人协调的过程中,不爽的地方暴露出来,因为我们的公共模块很少,我们也在不断努力的在抽取,这样会导致我们公共的模块变化比较大,每次变动的时候都需要删除node_modules下面本地安装的uikit,然后再次npm install ….一次我忍了,二次一声叹息, 三次四次,你妹。。。是的,我懂的,我们都么有那么好的耐心。
那怎么办呢??
我们又想按照标准模块的做法,又想酷爽的解决标准模块的依赖问题。不得再次祭出webpack。真的懂我们开发者的心啊,么么哒!
由于node的横空出世,彻底解放了前端的生产力。大神们纷纷开始造了一个个轮子。比如想在前端建立前端的仓库,类似maven的仓库,比较有名的是bower(twitter出品),components(tj大神)。所以为了兼容这些轮子,webpack也做了相应的适配。正好这个适配也可以很好的解决上面我提到的我们想要解决的问题。
剩下的事情就变得异常的简单了, 一个配置项搞定。
在webpack中的配置文件中
module.exports = {
entry: './index.js',
output: {
path: './build',
filename: 'bundle.js'
},
entry: './index.js',
output: {
path: './build',
filename: 'bundle.js'
},
resolve: {
modulesDirectories: ['', 'uikit', 'node_modules’] //是的,webpack提供了多个模块目录的解析,通过这个解决本地模块的问题。
}
};
for example:
➜ web-module tree -L 2
.
├── build
│ └── bundle.js
├── index.js
├── package.json
├── uikit
│ ├── index.js
│ ├── package.json
│ └── utils.js
├── webpack.config.js
└── webpack.config.js~
.
├── build
│ └── bundle.js
├── index.js
├── package.json
├── uikit
│ ├── index.js
│ ├── package.json
│ └── utils.js
├── webpack.config.js
└── webpack.config.js~
2 directories, 8 files
➜ web-module more uikit/utils.js
var _ = module.exports = {};
_.sayHello = function() {
console.log('111say hello world...');
var _ = module.exports = {};
_.sayHello = function() {
console.log('111say hello world...');
};
➜ web-module more index.js
require('uikit/utils').sayHello();
打包,
webpack
运行
➜ web-module node build/bundle.js
111say hello world...
这是你修改utils的方法,就不需要什么本地安装了。
在我们顺利的解决了模块化依赖的问题后,再来看看工作流的问题。
当我们在开发环境中,我们需要不停的自动的监控打包,然后在上线之前还要做做写优化比如压缩等。于是就需要不停的敲命令了。
开发环境,
webpack
webpack -d —-config webpack.config.js
webpack —watch
webpack -d —config webpack.config.js —watch
上线:
webpack -p —config webpack.production.js
敲出上述的命令也真是一件体力活。还好npm的run可以为我们定制一些的工作流。在package.json中配置,相应的参数即可。
{
"name": "web-module",
"version": "1.0.0",
"description": "web module",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js -w",
"release": "webpack --config webpack.production.js",
"start": "webpack-dev-server --port 3000 --watch --process --color"
},
"keywords": [
"web",
"module"
],
"author": "hufeng",
"license": "ISC"
}
"name": "web-module",
"version": "1.0.0",
"description": "web module",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js -w",
"release": "webpack --config webpack.production.js",
"start": "webpack-dev-server --port 3000 --watch --process --color"
},
"keywords": [
"web",
"module"
],
"author": "hufeng",
"license": "ISC"
}
爽直的时刻:
npm run build #开发
npm run dist #正式环境打包
➜ web-module npm run build
> web-module@1.0.0 build /Users/bee1314/Code/eggs/web-module
> webpack --config webpack.config.js -w
Hash: a2f467270792fdfe044c
Version: webpack 1.4.15
Time: 77ms
Asset Size Chunks Chunk Names
bundle.js 1709 0 [emitted] main
[0] ./index.js 35 {0} [built]
[1] ./uikit/utils.js 99 {0} [built]
> web-module@1.0.0 build /Users/bee1314/Code/eggs/web-module
> webpack --config webpack.config.js -w
Hash: a2f467270792fdfe044c
Version: webpack 1.4.15
Time: 77ms
Asset Size Chunks Chunk Names
bundle.js 1709 0 [emitted] main
[0] ./index.js 35 {0} [built]
[1] ./uikit/utils.js 99 {0} [built]
➜ web-module npm start
> web-module@1.0.0 start /Users/bee1314/Code/eggs/web-module
> webpack-dev-server --port 3000 --watch --process --color
http://localhost:3000/webpack-dev-server/
webpack result is served from /
content is served from /Users/bee1314/Code/eggs/web-module
Hash: a2f467270792fdfe044c
Version: webpack 1.4.15
Time: 90ms
Asset Size Chunks Chunk Names
bundle.js 1709 0 [emitted] main
chunk {0} bundle.js (main) 134 [rendered]
[0] ./index.js 35 {0} [built]
[1] ./uikit/utils.js 99 {0} [built]
> web-module@1.0.0 start /Users/bee1314/Code/eggs/web-module
> webpack-dev-server --port 3000 --watch --process --color
http://localhost:3000/webpack-dev-server/
webpack result is served from /
content is served from /Users/bee1314/Code/eggs/web-module
Hash: a2f467270792fdfe044c
Version: webpack 1.4.15
Time: 90ms
Asset Size Chunks Chunk Names
bundle.js 1709 0 [emitted] main
chunk {0} bundle.js (main) 134 [rendered]
[0] ./index.js 35 {0} [built]
[1] ./uikit/utils.js 99 {0} [built]
webpack: bundle is now VALID.
相关推荐
1 开篇:落地前端工程化,告别纸上谈兵!.pdf 10 环境管理:不同项目使用不同Node版本,如何优雅切换?.pdf 11 镜像管理:依赖安装老出问题,聊聊Npm镜像那些险象环生的坑!.pdf 12 数据管理:前端也能愉快地操作...
─ albedo-ui -- 前端工程[8080]└── albedo-common -- 系统公共模块 ├── albedo-common-api -- 服务基础api ├── albedo-common-core -- 公共工具类核心包 ├── albedo-common-module -- 模块基础包└──...
├─jeeplatform----------------------------父项目,公共依赖 │ │ │ ├─jeeplatform-admin--------------------------基础管理系统 │ │ │ ├─jeeplatform-cms-----------------------内容管理系统 │ │ ...
主流MVVM框架(React\Vue\Angular)、Hybrid App\React Native\Weex、TypeScript、RESTFul、WEB安全、前端工程化、依赖管理、性能优化、 重构、团队协作、可维护、易用性、SEO、UED、前端技术选型、快速学习能力等;
项目结构描述: 该项目中有五个子模块。...2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计
Angular-FEGuide.zip,【前端面试题 前端学习 面试指南】 一份涵盖大部分前端工程师所需要掌握的核心...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。
| 简要说明:尝试过SpringCloud微服务架构,但对于个人网站来说过于沉重和耗费资源,所以我用maven多模块的方式进行了拆分,将来可以改造为微服务架构。 | 简要说明:之前一直没有使用Vue/React是因为SPA对SEO不友好...
在模块化系统的结构中,模块是可组合、可分解和更换的单元,这就要求模块本身具有一定的 独立性,完整的前端模块化方案需要将js、css和模板维护在一起,保证模块的独立。规范在scrat中静态资源分成 模块化资源 和 非...
什么是qvkqvk是一个集成现代前端工程化最佳实践的通用Web开发环境,可用于开发传统C/S架构的Web应用、SPA(单页应用)、H5(App内嵌页)等。qvk初始版集成以下Web框架和打包工具。:The ProgressiveJavaScript ...
谈谈你对工程化的初步认识,结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值简单的来说,前端工程化就是使用工程化的方法来进行软件开发,其目的是为了提高开发效率,减少重复的工作,降低...
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
并提供API node端支持插件,插件支持自定义路由/自定义API /自定义功能模块支持自定义同构方法(前端+ node端)支持小程序编译目录结构 aotoo-hub安装完成后的目录结构hub工作空间 ├── build ├── aotoo.config...
前端项目工程化生成器根据yeoman-generator编写的项目构建工具的生成器,可以快速的搭建前端一系列解决方案。##特点基础的css、img、js的检测、压缩、合并。自动编译Less内置webpack,兼容AMD or CMD开发方式,无需...
ikice-stark导读基于飞冰的微前端架构,架构内支持子应用类型为 工程化框架react, 工程化框架vue,模板引擎vue接入消息总线模块、沙箱隔离、公共组件、应用代理、一键打包等模块让开发专心于业务,开箱即用。...
本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也适合小白学习进阶, 或者实际项目借鉴参考! 当然也可作为毕设项目、课程设计、作业、项目初期...
FangFIS 是房天下前端(包括js, css, images)集成解决方案,主要解决前端工程化 、资源加载(压缩、合并、异步、按需、依赖管理)、模块化开发、自动化等问题,由两部分组成。
jdf关于JDF JDF京东前端开发集成解决方案(京东前端集成解决方案)目的是合理,快速和高效的解决前端开发中的工程和项目问题,主要提供了:前端控制台工具:集调试,建造,布署为一体前端模块:下载,预览,发布前端...
fis3 是百度开发的面向前端的工程构建工具。对于前端工程,在性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题上有较好的实现。
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
webpack构建,紧跟前端模块化、组件化进程 - 不懂运行,下载完可以私聊问,可远程教学 该资源内项目源码是个人的毕设,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! 1、该资源...