func-package

函数库, 面向复杂业务场景的 js 类库

json文件引用

前言

在日常开发中，可能需要用 import 方式引用*.json 文件，但是rollup.js编译原生ES6的 import 引用默认只会解析 *.js 。 这里要在rollup.js编译的源码中使用*.json文件，官方提供了一个插件模块 @rollup/plugin-json

实现例子

  • 编译json文件引用

demo例子

https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-02-05/

npm i


## 开发模式
npm run dev


## 生产模式
npm run build

实现步骤

步骤1: 目录和准备

.
├── build
│   ├── rollup.config.dev.js
│   ├── rollup.config.js
│   └── rollup.config.prod.js
├── dist
│   ├── index.js
│   └── index.js.map
├── example
│   └── index.html
├── package.json
└── src
    └── index.js

安装对应编译的npm模块

## 安装 rollup.js 基础模块
npm i --save-dev rollup 


## 安装 json 引用解析插件
npm i --save-dev @rollup/plugin-json


## 安装 rollup.js 编译本地开发服务插件
npm i --save-dev rollup-plugin-serve


## 安装 rollup.js 编译代码混淆插件
npm i --save-dev rollup-plugin-uglify


## 安装 rollup.js 编译ES6+的 babel 模块
npm i --save-dev @rollup/plugin-babel @babel/core @babel/preset-env


## 安装 json 引用插件
npm i --save-dev @rollup/plugin-json

步骤2: rollup配置

  • 编译基本配置 ./build/rollup.config.js
const path = require('path');
const { babel } = require('@rollup/plugin-babel');
const json = require('@rollup/plugin-json');


const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}


const babelOptions = {
  "presets": ['@babel/preset-env'],
}


module.exports = [
  {
    input: resolveFile('src/index.js'),
    output: {
      file: resolveFile('dist/index.js'),
      format: 'umd',
    }, 
    plugins: [
      json(),
      babel(babelOptions),
    ],
  },
]
  • 开发模式配置基本 ./build/rollup.config.dev.js
const path = require('path');
const serve = require('rollup-plugin-serve');
const configList = require('./rollup.config');


const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}
const PORT = 3000;


const devSite = `http://127.0.0.1:${PORT}`;
const devPath = path.join('example', 'index.html');
const devUrl = `${devSite}/${devPath}`;


setTimeout(()=>{
  console.log(`[dev]: ${devUrl}`)
}, 1000);


configList.map((config, index) => {


  config.output.sourcemap = true;


  if( index === 0 ) {
    config.plugins = [
      ...config.plugins,
      ...[
        serve({
          port: PORT,
          contentBase: [resolveFile('')]
        })
      ]
    ]
  }
  
  return config;
})




module.exports = configList;
  • 生产模式配置基本 ./build/rollup.config.prod.js
const { uglify } = require('rollup-plugin-uglify');
const configList = require('./rollup.config');


const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}


configList.map((config, index) => {


  config.output.sourcemap = false;
  config.plugins = [
    ...config.plugins,
    ...[
      uglify()
    ]
  ]


  return config;
})


module.exports = configList;
  • 在./package.json配置编译执行脚本
{
  "scripts": {
    "build": "node_modules/.bin/rollup -c ./build/rollup.config.prod.js",
    "dev": "node_modules/.bin/rollup -w -c ./build/rollup.config.dev.js"
  },
}

步骤3: 待编译ES6源码

  • 源码路径 ./src/index.js
  • 源码内容
import pkg from './../package.json';


const dom = document.getElementById('J_Code');
const pkgText = JSON.stringify(pkg);
const showCode = `<code>${pkgText}</code>`;


dom.innerHTML = showCode;

步骤4: 编译结果

  • 在项目目录下执行 开发模式 npm run dev
  • 编译结果在目录 ./dist/ 下

步骤5: 浏览器查看结果

  • example目录./example/index.html
  • example源码
<html>
  <head>
    <script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.js"></script>
  </head>
  <body>
    <p>hello world</p>
    <div id="J_Code"></div>
  </body>
  <script src="./../dist/index.js"></script>
</html>
2024/10/7 23:51:34