现在很多开发朋友对于使用webapck、babel搭建开发环境已经不陌生,但很少去系统性的了解项目依赖。
本文从环境依赖包说起,让你对自己的开发环境有更深的了解。
为了简单,我们将依赖分个类:Babel相关、webpack相关、可选的依赖包。
要使用最新的ES6+语法,必须少不了Babel转码,那么要搭建一个完全体的环境,应该使用哪些依赖呢?
首先,我们安装最核心的依赖: @babel/cli、@babel/core、@babel/polyfill、@babel/register、core-js
下面是他们的一些简单解释:
{
/*
Babel 自带了一个内置的 CLI 命令行工具,可通过命令行编译文件。
*/
"@babel/cli": "^7.4.3",
/*
看到`core`就知道它是`babel`的核心,一些转码操作都是基于它完成的,
所以它是必须的依赖。
*/
"@babel/core": "^7.4.3",
/*
Babel默认只转换新的JavaScript语法,但是不转换新的api,比如
`Iterator`、`Generator`、`Set`、`Maps`、`Proxy`、`Reflect`、
`Symbol`、`Promise` 等全局对象,以及一些定义在全局对象上的方法(比
如 `Object.assign` )都不会转码。而`@babel/polyfill`就可以做到。
*/
"@babel/polyfill": "^7.4.3",
/*
让webpack.config.babel.js也支持ES6语法
*/
"@babel/register": "^7.4.0",
/*
通俗说就是动态polyfill,它可以动态加载需要的新API,具体可以看https://github.com/zloirock/core-js#readme
*/
"core-js": "3",
}
下面我们安装必需的preset和plugin:@babel/preset-env、@babel/plugin-proposal-class-properties、@babel/plugin-proposal-decorators、@babel/plugin-proposal-object-rest-spread、@babel/plugin-syntax-dynamic-import
下面是它们的一些解释:
{
/*
根据指定环境来转码,这个不用说,必装
*/
"@babel/preset-env": "^7.4.3",
/*
对class中属性初始化语法、static等语法进行处理
*/
"@babel/plugin-proposal-class-properties": "^7.4.0",
/*
装饰器语法处理
*/
"@babel/plugin-proposal-decorators": "^7.4.0",
/*
对象rest、spread语法处理
*/
"@babel/plugin-proposal-object-rest-spread": "^7.4.3",
/*
import()语法处理
*/
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
}
安装好了以上preset和plugins,我们需要新建一个.babelrc文件来使用它们:
{
"presets": [
[
"@babel/env",
{
"useBuiltIns": "usage",
//如果useBuiltIns选项为usage,则要申明corejs的版本,这也是为什么要安装core-js的原因
"corejs": "3",
"loose": true
}
],
"@babel/typescript", //如果你的环境有typescript,记得安装它
"@babel/react" //如果你使用了react,也要记得安装哦
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/proposal-class-properties",
{
"loose": true
}
],
"@babel/proposal-object-rest-spread",
"@babel/plugin-syntax-dynamic-import"
]
}
以上我们对于ES6+最新语法的转码已经完全没有问题了,下面我们开始说说Webpack有哪些必需要安装的依赖
上面的Babel转码已经配置完成。但我们要使用它们,还要依靠webpack来告诉我们需要转码的项目入口以及在转码过程中需要的配置(比如loader)。
既然需要webpack,那么我们安装webapck以及它必需的依赖包:webpack、webpack-cli、webpack-dev-server、babel-loader、html-webpack-plugin
安装完成后我们新建webpack.config.babel.js,然后我们来配置一下:
import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
export default {
mode: 'development',
entry: {
app: path.resolve(__dirname, '../src/index.tsx')
},
devtool: 'cheap-module-source-map',
output: {
path: path.resolve(__dirname, '../build'),
filename: 'bundle-[name]-[hash].js',
chunkFilename: 'chunk-[name]-[hash].js'
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.less', '.json'],
modules: ['node_modules']
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.ejs'),
templateParameters: {
title: 'test'
}
})
],
devServer: {
port: 8080,
host: 'localhost',
disableHostCheck: true
}
};
细心的人看出来,上面的配置用的是ES6的写法,要做到这点需要满足:
tips: 这里我使用的是ejs作为html的模板。
到这里,必需的依赖包已经安装完成了,下面的可选依赖是根据大家项目的具体情况去安装,比如样式、图片、字体、css压缩配置等等...
这里我推荐几个好用的依赖包:
{
/*
将CSS提取为独立的文件的插件,对每个包含css的js文件都会创建一个CSS文件,支持按需加载css和sourceMap
*/
"mini-css-extract-plugin": "^0.6.0",
/*
css压缩
*/
"optimize-css-assets-webpack-plugin": "^5.0.1",
/*
对打包的js进行压缩处理的webapck插件
*/
"terser-webpack-plugin": "^1.2.3",
/*
多进程处理打包,加快打包速度
*/
"thread-loader": "^2.1.2",
/*
webpack打包进度条
*/
"webpackbar": "^3.2.0"
}
至于webpack里的各种loader,大家根据自己的项目去安装吧。
依赖注入通常也是我们所说的ioc模式,今天分享的是用typescript语言实现的ioc模式,这边用到的主要组件是 reflect-metadata 这个组件可以获取或者设置元数据信息,它的作用是拿到原数据后进行对象创建类似C#中的反射
angular用nodejs主要是用它的npm工具包,npm里面有很多很方便的工具可以用在前端开发,Angular是一个开源框架的,以 JavaScript 编写的库,一个客户端的JavaScript MVC框架,用于开发动态Web应用程序。
学习React前提必须拥有Javascript和DOM知识。这个门槛已经很低了。但是很多的教程里面都提到npm,nodejs.要先安装nodejs。但是react并不依赖node。
在package.json 的scripts中加入 { postinstall: patch-package },这是npm的一个钩子,会在依赖包被install之后执行
在日常进行JS/TS项目开发的时候,经常会遇到require某个依赖和module.exports来定义某个函数的情况。就很好奇Modules都代表什么和有什么作用呢。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!