数据API 案例 开发者 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

你还在使用古老的技术和规范开发 JS 组件吗?

使用 webpack2 和 NPM Scripts 进行 JavaScript 组件开发

最近 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:

module.exports = require('./demo');

然后创建 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.1.0.min.js。这是一个 umd 的包,所以你可以在浏览器中使用 amd/cmd 库加载或者直接在 script 标签中引入和使用。

总结

我们使用 webpack 搭建了一个简单的组件开发环境,这样我们可以简单地开始我们的 JS 组件开发,使用新的语言规范,然后通过 webpack-dev-server 代理 http-server 进行调试,通过 webpack —env.production 进行发布。我们还可以将它们与 NPM Scripts 集成,这样我们的组件开发就非常方便了。

原文来自: 奇舞周刊

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
你还在使用古老的技术和规范开发 JS 组件吗?
发布:2017-03-09

使用 webpack2 和 NPM Scripts 进行 JavaScript 组件开发

最近 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:

module.exports = require('./demo');

然后创建 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.1.0.min.js。这是一个 umd 的包,所以你可以在浏览器中使用 amd/cmd 库加载或者直接在 script 标签中引入和使用。

总结

我们使用 webpack 搭建了一个简单的组件开发环境,这样我们可以简单地开始我们的 JS 组件开发,使用新的语言规范,然后通过 webpack-dev-server 代理 http-server 进行调试,通过 webpack —env.production 进行发布。我们还可以将它们与 NPM Scripts 集成,这样我们的组件开发就非常方便了。

原文来自: 奇舞周刊

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 风险信息查询
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 风险信息查询
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future