logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

使用Parcel 打包跳过项目配置文件的方法

 Jcstone 2019-12-05

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。

Parcel 可以使用任何类型的文件作为入口，但是最好还是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相对路径引入主要的 JavaScript 文件，Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址。

全局安装parcel：

npm install -g parcel-bundler

创建项目文件夹后，构建项目：（-y 全选是）

npm init -y

生产模式安装parcel到项目，在项目目录下创建一个 package.json 文件。：

npm install parcel-bundler --save-dev

接下来，创建一个 index.html 和 index.js 文件：

<html>
  <body><script src="./index.js"></script>
  </body>
</html>

console.log('hello world')

接着，通过修改你的package.json来添加这些任务脚本：

{  
"scripts": { 
   "dev": "parcel <your entry file>",  
  "build": "parcel build <your entry file>"
  }
}

然后，你就能运行它了：

# 以开发模式运行

npm run dev

#以生成模式运行

npm run build


如果有项目配置文件，方便后期修改。parcel打包就比较麻烦，如何跳过不需要打包的文件？parcel 会自动识别html中的引用,如果是http://就不会进行打包处理, 如果是本地文件,就会识别成Assets对象,进行打包。

因此项目配置js文件，可采用http://  来标识，在body的index.js之前引用。如：

<html>
  <body>
    <--
    页面内容
    --> 
  <script src="http://localhost:8080/webproject/config.js"></script>
  <script src="./index.js"></script>
  </body>
</html>

为便于调试，config.js的路径和tomcat或者npm的IP和端口号一致。

这样config.js的变量和方法可以在所有模块中可以作为全局变量使用。config.js文件一般作者采用一个config对象。例如：let config={ AppName:"我的Web应用",Version:"12.3.0" };

在parcel run build打包后，需将config.js文件复制到dist文件夹，注意dist中的config.js修改保持最新。

然后在index.html文件中的

<script src="http://localhost:8080/webproject/config.js"></script>

绝对路径改为相对路径：

<script src="./config.js"></script>

这样dist文件夹就可以部署发布到tomcat，不受tomcat的IP和端口的影响。

——jcstone

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： Jcstone > 《Javascript》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多