你还在使用古老的技术和规范开发 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