使用 webpack2 和 NPM Scripts 进行 JavaScript 组件开发
来源:互联网 发布:掘金数据 编辑:程序博客网 时间:2024/05/22 11:49
- 搭建一个简易环境
- 配置 webpack
- 生产环境和开发环境
- 使用 babel 编译 ES6
- 配置开发调试的 webpack-dev-server
- 创建 NPM Scripts
- 开始项目开发
- 构建和发布
- 总结
最近 webpack 成为非常流行的打包工具,很多项目都在使用它。在我们进行 JavaScript 独立组件开发的时候,如果我们想要使用语言新特性,又想发布的时候产出兼容性好的代码,那么使用 webpack 就能够很大程度上帮助我们实现这一目标。
现在让我们来看看究竟该怎么做吧。
搭建一个简易环境
首先,第一步是初始化和安装一些必要的依赖,搭建一个简易的开发和调试环境:
有了这个基础环境之后,我们来配置一份 webpack.config.js
配置 webpack
我们在项目目录里添加 webpack.config.js
代码比较长,但不复杂,这里我分别解释一下各部分的作用:
生产环境和开发环境
首先我们从 package.json 里面取出一些信息,包括模块名和版本号,我们依赖它们来生成对应的 umd 模块的 library、输出的文件名以及版本号。
在这里我们规定在开发环境时输出 模块名.js
,在生产环境发布时输出 模块名-版本号.min.js
。
在 webpack2 里,我们可以通过 env.production 获取命令行参数 --env.production
,从而区别是开发环境还是生产环境。
在生产环境中,我们不仅改变输出的文件名,还配置 UglifyJsPlugin 来压缩脚本。
使用 babel 编译 ES6
如果脚本用到 ES6,我们希望用 babel 编译的话,还需要加载 babel-loader 来进行编译。我们采用 babel 的默认配置 .babelrc
,在项目目录里添加 .babelrc:
然后我们在 webpack.config.json 里根据配置来添加 loader:
配置开发调试的 webpack-dev-server
最后,为了在开发环境里调试,我们还需要配置 webpack-dev-server:
webpack-dev-server 是一个代理,我们之前安装了 http-server,我们用 webpack-dev-server 来代理它,所以开发时我们让 http-server 运行在 8081 端口:
创建 NPM Scripts
配置好了 webpack,创建 NPM Scripts 是个非常简单的过程:
我们在 package.json 里添加两个脚本,这样我们就可以使用 npm start
来启动开发环境,使用 npm run build-release
来发布到生产环境了。
开始项目开发
接下来我们创建 lib/app.js:
然后创建 lib/demo.js:
创建 examples/index.html:
运行 npm start
,访问 http://localhost:8080/examples/index.html
打开控制台,1秒后就能看到输出 test done
。
构建和发布
接下来,我们可以停止开发服务器,运行 npm run build-release
。如果你的 package.json 里的版本号是 1.0.0,那么它将在 dist 目录下生成 demo-1.0.0.min.js。这是一个 umd 的包,所以你可以在浏览器中使用 amd/cmd 库加载或者直接在 script 标签中引入和使用。
总结
我们使用 webpack 搭建了一个简单的组件开发环境,这样我们可以简单地开始我们的 JS 组件开发,使用新的语言规范,然后通过 webpack-dev-server 代理 http-server 进行调试,通过 webpack --env.production 进行发布。我们还可以将它们与 NPM Scripts 集成,这样我们的组件开发就非常方便了。
你喜欢的组件开发方式是怎样的?欢迎在评论区讨论。
- 使用 webpack2 和 NPM Scripts 进行 JavaScript 组件开发
- npm scripts
- 使用NPM + Webpack进行前端开发的示例
- npm 脚本(npm scripts)
- npm scripts 使用指南
- Why npm Scripts?
- npm scripts 使用指南(阮一峰)
- npm scripts 使用指南
- npm scripts详解
- npm scripts 使用指南
- npm scripts 使用指南
- npm scripts 使用指南
- PhoneGap Ios 使用NPM 进行安装和环境搭建
- 开发工具-npm使用
- 使用ATL进行com组件的开发
- 使用npm和node开发命令行工具并使用npm管理你的包
- Electron 使用 Webpack2 预编译 Electron 和 Browser targets
- 使用面板组件进行分组和布局
- 工业大数据漫谈11:工业大数据可视化的难点
- String,StringBuffer和StringBuilder之间的区别,速度比
- 软件质量模型的6大特性27个子特性
- 什么是加壳和脱壳技术?加壳和脱壳技术是什么意思?
- 聊聊Thrift(二) thrift java lib源码编译
- 使用 webpack2 和 NPM Scripts 进行 JavaScript 组件开发
- python 数据处理学习一(pandas)
- 自定义UICollectionReusableView
- H5基础知识第八课时(JS运算符和计算水仙花数)
- hdu1072 Nightmare bfs(java版本)
- jquery和ajax的使用
- Bootstrap3.0学习第九轮(CSS补充)
- 单链表的创建,表长,插入,查找,逆置,中间元素,删除节点,打印
- MarkdownPad 渲染出现This view has crashe错误