建立一个前端的工具库---创建npm工程

要建一个工程,首先得明白这个工程的作用。因为现在公司还有部分工程是老工程,所以,这次规划除了针对新工程,还需要能够将js打包成压缩文件提供给老工程使用标签引入。打包工具选择webpack,单元测试集成了karma+jasmine。好了,现在就开始搭建吧!

npm标准工程

因为是npm工程,所以本地首先要有node环境,并且装上npm。如果没有配置的请自行到官网下载安装。

当环境都配置好了之后我们就可以使用命令npm init,然后依次填入信息,就可以生成一个package.json文件了。

建立一个前端的工具库---创建npm工程_第1张图片

生成的package.json文件如下:

{
  "name": "js-utils",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xuchao",
  "license": "ISC"
}

然后我们建一个src文件夹来存放自己的代码。再新建一个index.js。目录结构如下:

|-- src                             
    └─index.js                            
|-- package.json                    
|-- README.md                       

至此,我们已经搭建了一个最简单的npm工程。这里按照前面介绍的配置好的话,就可以使用npm publish来提交自己的代码了。

关于模块化

这里我统一使用的是ES6的模块化语法。也就是importexport

主要是因为目前公司的新工程都是使用webpack打包。也都支持这种语法。此外个人比较喜欢这种语法。

而对于老工程,我们后面给工具工程引入webpack,然后我们可以按需打包出我们想要的js工具集合,然后通过

你可能感兴趣的:(javascript,前端)