vue2.x 多页面构建_parcel快速构建多页面应用

前言

  由于项目需要前端时间，用到了webpack去搭建一个html的应用，发现配置起来很繁琐。为了能够自动加载所有的入口。不得不去写一些代码。其中用到的一个处理html的loader(由于html中没有require，所以需要处理)，可能是由于太久是之前开发的，太久没有维护，抽出来的img的src 都是 {default:path}的这种样子，而不得不去fork下来改写。
没有更加方便快捷的方式呢？我的目光被一个自称是Blazing fast, zero configuration web application bundler极速零配置Web应用打包工具的打包?工具吸引，他就是parceljs。

  在使用后，便迅速被其折服，第一是速度，第二是配置简单，快速上手，于是决定分享一下，pracel如何快速构建多页面应用。

安装

你可以选择通过 Yarn 或者 npm 安装 Parcel ：Yarn:yarn global add parcel-bundlernpm:npm install -g parcel-bundler要注意的是，由于mac本身设计问题，可能会出现Error: EACCES: permission denied, access 这样的错误。语句的前面加上sudo 就可以了。

基本搭建

在你正在使用的项目目录下创建一个 package.json 文件：yarn init -y或者npm init -y然后放入一些页面。例如：

我建了一个如上图一个一样的一个demo。只需要在package.json 中加入一个scripts，然后运行，就可以看到项目以飞快的速度，运行起来。包括里面的图片，外部css，背景图,全部都正常的显示出来。一个简单的配置就完成了。

如果还想要改一些端口啊，你直接在scripts的语句中加入配置如，parcel ./src/pages/**.html --port 1111当然这里只是举个栗子，更多的配置可以去看parceljs的cli介绍^[1]。虽然基本运行已经可以了，但是我觉得还是不够?，我想要配置更多的东西。比如根据是本地开发环境，或者是生产环境的时候，去加载不同的一个配置。比如我在不同的环境，有不同接口路径，我希望每个环境请求的接口不一样，而我又懒，不想手动来做，那么我要怎么样做呢？

进阶搭建

打包环境配置

首先，学习我们的为我们的配置项建立一个目录，base.js 是放入一些通用的配置项，development.js 是的开发环境的配置，production.js 的是生产环境的配置。

    //   base.js
const Path = require('path');
// 单个入口文件路径
// const entryFiles = Path.join(__dirname, './index.html');
// 或多个入口文件路径
// 1.glob模式
const entryFiles = './src/pages/*.html';
// 2.数组格式
// const entryFiles = ['./src/index.html', './some/other/directory/scripts.js'];
// Bundler 选项
const options = {
   prot:12345,
   outDir: './dist', // 将生成的文件放入输出目录下，默认为 dist
   outFile: 'index.html', // 输出文件的名称
   publicUrl: '/', // 静态资源的 url ，默认为 '/'
   watch: true, // 是否需要监听文件并在发生改变时重新编译它们，默认为 process.env.NODE_ENV !== 'production'
   cache: true, // 启用或禁用缓存，默认为 true
   cacheDir: '.cache', // 存放缓存的目录，默认为 .cache
   contentHash: false, // 禁止文件名hash
   global: 'moduleName', // 在当前名字模块以UMD模式导出，默认禁止。
   minify: false, // 压缩文件，当 process.env.NODE_ENV === 'production' 时，会启用
   scopeHoist: false, // 打开实验性的scope hoisting/tree shaking用来缩小生产环境的包。
   target: 'browser', // browser/node/electron, 默认为 browser
   bundleNodeModules: false, // 当package.json的'target'设置'node' or 'electron'时，相应的依赖不会加入bundle中。设置true将被包含。
   // https: { // 设置true自动定义一对密钥和证书，false取消变成http
   //     cert: './ssl/c.crt', // 自定义证书路径
   //     key: './ssl/k.key' // 自定义密钥路径
   // },
   logLevel: 3,
   /**
    * 5 = 储存每个信息
    * 4 = 输出信息、警告和错误附加时间戳和dev服务的http请求
    * 3 = 输出信息、警告和错误
    * 2 = 输出警告和错误
    * 1 = 输出错误
    */
   hmr: true, // 开启或禁止HRM
   hmrPort: 0, // hmr socket 运行的端口，默认为随机空闲端口(在 Node.js 中，0 会被解析为随机空闲端口)
   sourceMaps: true, // 启用或禁用 sourcemaps，默认为启用(在精简版本中不支持)
   hmrHostname: '', // 热模块重载的主机名，默认为 ''
   detailedReport: false // 打印 bundles、资源、文件大小和使用时间的详细报告，默认为 false，只有在禁用监听状态时才打印报告
};

module.exports={
   entryFiles,
   options
}

//              development.js
const Bundler = require('parcel-bundler');
let {options,entryFiles}=require('./base');
let config=Object.assign(options,{
    port:1111,
    outDir:'./dev'
});

(async function() {
    // 使用提供的入口文件路径和选项初始化 bundler
    const bundler = new Bundler(entryFiles, config);
    // 运行 bundler，这将返回主 bundle
    // 如果你正在使用监听模式，请使用下面这些事件，这是因为该 promise 只会触发一次，而不是每次重新构建时都触发
    const bundle = await bundler.serve(config.port);
})();

//       production.js
const Bundler = require('parcel-bundler');
let {options,entryFiles}=require('./base');
let config=Object.assign(options,{
    sourceMaps: false,
    publicUrl:'./'
});

// 使用提供的入口文件路径和选项初始化 bundler
const bundler = new Bundler(entryFiles, config);
// 运行 bundler，这将返回主 bundle
bundler.on('buildEnd', () => {
    console.log('打包?结束');
    process.exit(0); // 因为不会自动结束进程。所以手动结束。
});

// Call this to start bundling
bundler.bundle();

通过这些打包配置文件，然后配置我们的sctipts,就能进行区分不同的环境而进行打包。

在parcel 默认的环境配置就是development，所以不需要额外的设置，所以只在生产模式的 设置NODE_ENV为production。然后分别运行对应的配置文件，这一点上还是和webpack很像的.

项目环境配置

同时也可以通过.env 文件配置一些项目中的变量，如配置接口的请求路径，避免手动修改。在.env.development和.env.production 中配置不同的 API_URL

.env.development:

API_URL="http://rap2.taobao.org:38080/app/mock/266449"

.env.production:

API_URL="http://rap2.taobao.org:38080/app/mock/252285"

然后在页面中去请求接口，我们就可以看到，在不同的环境中，成功的请求了不同的接口。(在这里只是为了示例，所以就没有去，把请求这些封装起来，直接在这里使用，真实项目中可不要这样做?。)

当然接口只是个示例，你也可以配置其他项目中的一些东西。

用的过程中发现的一些坑点

1. dev 的模式下也会创建一个正式的目录出来，所以为了方便，我直接在不同环境配置了不同的目录。
2. 使用api 方式的时候 build 后不能自动技术，没有一个结束的方法，当然也可能是我研究不够深入导致的，所以我只能使用process.exit(0); 的方式去结束它。

end

希望你能够喜欢?。

✨✨✨

关注我,获取最新的前端资讯

✨✨✨✨✨✨

参考资料

[1]

parceljs的cli介绍: https://parceljs.org/cli.html 

由于微信的限制，上方的demo的gif图无法上传 /吐血，点击下方查看原文 ↓ ↓ ↓